jQuery事件（绑定事件、解除绑定、移入移出事件、取消时间冒泡和默认事件、自动触发事件、自定义事件、事件命名空间、事件委托等）

目录

绑定事件

$('div').eventName(function(event){})

$('div').on(eventName,function(event){})

$('div').bind(eventName,function(event){})

$('div').one(eventName,function(event){})

解除绑定

$('div').off('click',fun1)

$('div').unbind('click',fun1)

移入移出事件

mouseover/mouseenter

mouseout/mouseleave

hover

取消事件冒泡和默认事件

自动触发事件

$('div').trigger('click')

$('div').triggerHandler('click')

自定义事件

$('div').on(myName,function(event){})

事件命名空间

$('div').on(eventName.name,function(event){})

事件委托

$('ul').delegate($('li'),'click',function(e){})

js原生事件绑定链接

jQuery文档事件链接

---

绑定事件

$('div').eventName(function(event){})

给类数组中每一个div元素添加绑定事件，添加例如绑定点击事件：$('div').click(function(event){})，event为系统默认传入参数，推荐使用该种方法绑定事件，有提示，但是js原生部分事件没有实现，可以给一个元素的一个事件绑定多个函数而不会覆盖。

$('div').on(eventName,function(event){})

给类数组中每一个div元素添加绑定事件，例如绑定点击事件：$('div').on('click',function(event){})，event为系统默认传入参数，所有js原生事件都实现了，可以给一个元素的一个事件绑定多个函数而不会覆盖，可以绑定自定义事件。该方法还有3个参数的情况，中间添加一个参数obj，系统会将obj传给绑定函数接收的默认参数event.date，在绑定的函数中可以调用数据

$('div').bind(eventName,function(event){})

当给多个事件绑定一个函数时，eventName为一个字符串，包含多个事件名，中间以空格隔开。

当绑定多个事件和多个处理函数时，只传入一个参数：对象，该对象的属性为事件名，绑定的函数名为值。

同上，也可以传入3个参数，用法相同。

$('div').one(eventName,function(event){})

和on相同，不同在于事件只能被触发一次，自动触发也算被触发了一次。

 

解除绑定

$('div').off('click',fun1)

不传参数，移除所有事件。传入一个参数，表示移除该事件的所有绑定函数。传入两个参数，表示移除该事件的指定函数。

$('div').unbind('click',fun1)

用法同上。

 

移入移出事件

mouseover/mouseenter

鼠标移入事件。

mouseout/mouseleave

鼠标移出事件。注意out和over在移入子元素中会触发一次移出移入事件，而ennter和leave不会。

hover

该事件接收2个函数为参数，第一个为移入触发事件，第二个位移出触发事件，例如$('div').hover(function(){},function(){})，只能通过第一种方式调用。

 

取消事件冒泡和默认事件

和原生js相同，见底部js原生事件绑定链接。

 

自动触发事件

$('div').trigger('click')

自动触发div上的点击事件（会触发事件冒泡和默认事件，特殊：不会触发a的默认事件，可用a标签将span标签包裹，通过span绑定事件，冒泡后实现a的默认行为）。

$('div').triggerHandler('click')

自动触发div上的点击事件（不会触发事件冒泡和默认事件）。

 

自定义事件

$('div').on(myName,function(event){})

只能通过on绑定自定义事件，其中myName为自定义的名称，事件触发通过trigger(myName)或triggerHandler(myName)。

 

事件命名空间

$('div').on(eventName.name,function(event){})

事件通过on绑定，在绑定的时间名称后通过加.name命名空间，触发该类事件时会调用所有的绑定函数（包括通过.name的绑定函数），想区别调用时，通过trigger（会触发父元素的相同命名空间的事件）或triggerHandler。

 

事件委托

$('ul').delegate($('li'),'click',function(e){})

将$('ul')的元素点击事件委托给$('li')执行，其中第一个参数如果传入字符串，会调用$('')选取元素，ul必须嵌套li且ul为已存在的元素。用于给网页描绘完后新增的元素绑定事件。其中this指向$('li') 。

 

js原生事件绑定链接

https://blog.csdn.net/AIWWY/article/details/115570041

jQuery文档事件链接

https://www.jquery123.com/category/events/