1、jQuery事件发展史:
(1).jQuery事件底层封装的都是原生js中的addEventListener();没有句柄的方式,处理IE兼容性方法,源码封装来模拟实现;
(2).bind();/unbind(); 以及事件代理delegate();/undelegate(); jQuery3.0版本后便废弃了,同时live();/die();(事件代理,其是将元素的事件委托给document),jQuery1.7版本后便废弃了;
(3).jQuery3.3.1版本中使用 on("事件类型","选填",function(){});两种方式即可以简单的事件处理,也可以进行事件委托; on();off(); one(); tigger(); 以及事件方法的直接使用;[jQuery1 、2版本很少使用,政务系统还会使用到,所以之前的方法最好掌握,同时目前jQuery宣布不再更新]
![](https://img.haomeiwen.com/i11823378/29ff2d8e7c5154e9.png)
![](https://img.haomeiwen.com/i11823378/8e4be22f9886e6b7.png)
2、两种事件的区别: window.onload = function(){}; $(document).ready(fn);//dom树解析后执行;[参考原生js中的js加载时间线] -> 等价于$(document).on('ready',function(){})
[load事件并非window独有事件,其他只要涉及到可下载的都有该事件,表示加载完成后便执行]
![](https://img.haomeiwen.com/i11823378/08e332d9296d0382.png)
Network: 涉及网络请求过程:
![](https://img.haomeiwen.com/i11823378/bac7d07753817262.png)
3、事件类型:(大致有100多种事件,jQuery提供了23种常用的事件类型)
(1).鼠标事件:click();/dblclick();hover();mousedow();/mouseup(); mousemove(); mouseover;/moseout; mouseenter();/mouseleave();//不会冒泡
![](https://img.haomeiwen.com/i11823378/bd6c1271dd82a055.png)
(2).键盘事件:keydown(); keypress(); keyup();
![](https://img.haomeiwen.com/i11823378/a9f70065f235f158.png)
(3).文本操作类事件:
![](https://img.haomeiwen.com/i11823378/ac9ce6310d2105ff.png)
4、基本事件处理/事件对象:trigger();//参数为事件类型名; off();//参数也为事件类型名
![](https://img.haomeiwen.com/i11823378/2163219c75631f32.png)
5、demo练习;
网友评论