JQuery事件机制笔记

Posted 2020-08-11 HandsomeHan

一、事件绑定及移除

1.bind()

bind()为每个匹配的元素绑定一个或多个事件处理函数；

语法：bind(event,fn)//不能给未来元素添加事件；

bind(event,fn);

bind({

key1: value1,

key2: value2,

key3: value3

});

unbind(event,fn)-->bind()的反向操作，删除元素的一个或者多个事件。

2.live()

live()把事件绑定到当前及以后添加的元素上面//JQ1.9已经放弃使用。

语法：live(event,fn);

live(event,fn);

JQ1.4之前使用的比较多，现在已经放到不推荐的使用列表中；

die(event,fn)-->live()的反向操作，删除先前使用的live()绑定的事件。

3.delegate();

delegate()把事件绑定到当前及以后添加的元素上面。

语法：delegate(selector,event,fn);

JQ1.4之后加入的，和live有点相似；

undelegate(selector,event,fn) --> 删除由delegate()方法添加的一个或多个事件处理程序。

4.on();

on() 把事件绑定到当前及以后(采用事件委托的方法)添加的元素上面。

语法：on(event,seletor,fn);

JQ1.7开始引入了全新的事件绑定机制；

off(event,seletor,fn)-->on()的方向操作，移除on()绑定的事件处理程序。

总结：从JQ1.7开始，JQuery开始引入了全新的事件绑定机制，on()和off()两个函数统一事件绑定。

JQuery退出on()的目的有两个，一个是为了统一接口，二是为了提高性能。建议使用on()和off()。

5.one();

one()为匹配的元素绑定一次性的事件处理函数。

语法：one(event,fn);//未来元素无效；

当使用one()方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除。

6.JQ合成事件---hover();

语法：hover(fn1,fn2);鼠标进入时执行fn1，鼠标离开时执行fn2。

7.JQ合成事件 ---toggle();

语法：1.toggle(fn1,fn2,fn3,fn4,...);

2.响应匹配元素的轮流的click事件或隐藏或显示。

8.事件对象

事件对象存储了和事件相关的信息

原生JS事件对象：

oDiv.onclick = function(ev) {

var oEvent = ev || window.event;

console.log(oEvent);//oEvent即为事件对象；

}

JQ处理了其中的兼容问题，可以直接使用

$(‘body‘).click(function(e){

console.log(e);//e即为事件对象；

});

常用的事件对象的属性：

阻止冒泡/传播：e.stopPropagation();

阻止默认行为：e.preventDefault();

事件类型：e.type;

触发事件的元素：e.target;

相对文档的坐标：e.clientX/Y e.pageX/Y;

鼠标事件中离开或者进入的DOM元素：e.relatedTarget;

事件发生的时间戳：e.timeStamp;(返回总毫秒数);

指示按了哪个键或者按钮：e.which;

9.转换

使用JS获取的DOM对象，然后在JQ中使用；

使用JQ获取的DOM对象，然后在JS中使用。