jQuery事件

jQuery事件

1、事件绑定

1.1、jQuery中有两种绑定事件方式

jqobj.eventName(fn)：编码效率略高/ 部分事件jQuery没有实现,所以不能添加

jqobj.on("eventName", fn):编码效率略低/ 所有js事件都可以添加

1.2、注意点: 两种方式可以混用，都可以同时添加多个相同或者不同类型的事件,不会覆盖

2、事件移除

off()方法对应on()方法，用于事件移除

如果不传递参数, 会移除所有的事件：jqobj.off();

如果传递一个参数, 会移除所有指定类型的事件：jqobj.off("eventName");

如果传递两个参数, 会移除所有指定类型的指定事件：jqobj.off("eventName", fn);

3、事件冒泡和默认行为的阻止

3.1、阻止事件冒泡： 在事件的回调函数中return false;或者事件回调函数接收event参数，调用event.stopPropagation()方法

3.2、阻止默认行为： 监听该事件并return false;或者事件回调函数接收event参数，调用event.preventDefault()方法

4、事件自动触发

jqobj.trigger("eventName");会触发事件冒泡和默认行为（a标签例外）

jqobj.triggerHandler("eventName");不会触发事件冒泡和默认行为

补充：自定义事件，使用jqobj.on("eventName",fn)定义事件，自定义事件只能自动触发

5、事件命名空间

使用jqobj.on("eventName",fn)定义事件时，可以将命名空间绑定在事件类型上：jqobj.on("eventName.space",fn)

命名空间有助于分辨事件的定义者,想要事件的命名空间有效,必须满足两个条件:

a.事件是通过on来绑定的
b.通过trigger触发事件
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发,而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

6、事件委托

6.1、什么是事件委托? 委托其他元素帮忙监听事件, 然后将事件执行结果反馈给委托者

6.2、事件委托依赖于事件冒泡，被委托者必定是委托者的父级元素。

6.3、jQuery事件委托实现方法：jqobj.delegate("selector", "evenName", fn);

其中jqobj是被委托者，它帮忙监听selector选中的元素的evenName事件，然后执行fn函数 fn函数中的this会指向selector选中的元素，即事件的触发者，而不是jqobj，即监听者。

6.4、事件委托使用场景：

某些在页面加载完毕后才动态创建的元素需要提前绑定事件时，因为脚本初始执行时不可能找到这些动态创建的元素，无法直接绑定事件，这时需要将事件委托给父级元素。

7、两对鼠标移入移出事件对比

7.1、mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

7.2、mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件（推荐使用）