jquery 事件

绑定事件

绑定事件名

$(div).click(function(){ // ... })

绑定事件 on

可重复添加事件 可添加多个事件

参数

事件名 触发对象 传输数据 {} 回调函数

示例

$(div).on('click',function(){ // ... })

传输数据

$(div).on('click',{name:"传输数据"},function(e){ // ... e.data => {name:"传输数据"} })

事件委托

// h2 是 parent的子元素 $(parent).on('click','h2',{name:"传输数据"},function(e){ // ... $(this) => h2 })

添加多个事件

$(parent).on({ click:function(){ // ... }, mouseover:function(){ // ... } })

自定义事件

绑定事件 one

语法和on一样 只会执行一次

$(div).one('click',function(){ // ... })

解除事件 off

没有参数会解除所有事件 $(div).off()

$(div).on('click',function(){ $(div).off('click') })

主动触发事件 trigger/triggerHandler

trigger

$(div).on('click',function(e){ }) $(div).trigger('click')

参数

$(div).on('click',function(e,name,age){ // name,age }) $(div).trigger('click',['name',18])

触发自定义事件

$(div).on('FFFFF_EVENT',function(e,name,age){ // name,age }) $(div).trigger('FFFFF_EVENT')

triggerHandler

使用和trigger一样

triggerHandler与trigger的区别

默认行为

trigger 触发事件的默认行为 triggerHandler 不会触发事件的默认行为

// 触发聚焦 $(input).focus(function(){ console.log('获取焦点') }) $(input).trigger('focus') // 会触发默认行为 input 会出现光标 $(input).triggerHandler('focus') // 不会触发默认行为 input 不会出现光标

执行事件元素的数量

trigger 会执行所有选中元素的事件 triggerHandler 只会执行所有选中元素第一个的事件

是否冒泡

trigger 会冒泡 triggerHandler 不会冒泡

链式操作

trigger 可使用链式操作 triggerHandler 不可使用链式操作

事件对象