jQuery的事件模型

• 提供了统一的事件处理方法，不需要再考虑兼容性问题
• 允许添加多个事件处理函数，jQuery内部使用DOM2级事件模型的处理方式
• 使用标准事件名称(不带on)
• 事件实例作为事件处理函数的第一个参数
• 标准化事件实例中最常用的属性
• 提供了统一的事件取消和阻止默认行为的方法

添加事件处理

1，on方法

// on(eventType[,selector][,data],handler)
// 参数1(eventType): 事件类型
// 参数2(selector):   一般在事件委托的时候会需要
// 参数3(data): 传递一些数据给事件处理函数。在事件处理函数中，可以通过event.data获取
// 参数4(handler): 事件处理函数

// 事件委托：在父元素上添加事件，利用事件冒泡机制，当在子元素上操作时，会触发父元素的事件，提高性能和灵活性。

// 简单的事件绑定
$('li').on('click',function(event){
    console.log('%o li clicked',$(this));
});

// 复杂的事件绑定，用到事件委托，数据传递
$('div').on('click','#p1-1',{foo:'bar'},function(event){
    console.log('p clicked %o',event.data);
}).on('mouseover','#p1-1',{foo:'bar'},function(event){
    console.log('p clicked %o',event.data);
})

//!!放在父元素上也是可以的，用到的是冒泡机制！！
$('ul').on('click',function(event){
    console.log('%o clicked',$(event.target));
});

2，统一方法和属性

//stopPropagation():阻止冒泡

//preventDefault():阻止默认行为

//阻止冒泡和默认行为：return false

$('div').on('click',function(event){
    event.stopPropagation();
    console.log('%o clicked',$(this));
})

//所有支持的事件
//blur,change,click,dblclick,error,focus,focusin,
//focusout,keydown,keypress,keyup,load,unload

//mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover
//mouseup,ready,resize,scroll,select,submit

3，one方法

//one(eventType[,selector][,data],handler) 一次性的事件处理
$('p').one('click',function(event){
    console.log('%o clicked',$(this));
});

移除事件处理

//off(eventType[,selector][,handler])

$('p').on('click',function(){
    console.log('clicked');
}).on('click',clicked2)

$('p').off();                   // 移除所有事件
$('p').off('click');            // 移除所有click事件
$('p').off('click mouse');      // 移除所有click事件和mouse事件
$('p').off('click',clicked2);   // 移除click事件中的clicked2处理

事件实例对象

属性

// 以下带*的属性存在兼容性问题，且jQuery对其做了兼容性处理

altKey              originalTarget      ctrlKey             screenX
bubbles             originalEvent       currentTarget       screenY
button              pageX *             data                shiftKey
cancelable          pageY *             detail              target *
charCode            prevValue           delegateTarget      timeStamp
clientX             relateTarget *      eventPhase          type
clientY             result              metaKey *           view
namespace           which *             offsetX             offsetY

事件

//preventDefault()          :阻止浏览器的默认事件,比如点击超链接进行跳转
//stopPropagation()         :阻止冒泡
//stopImmediatePropagation():阻止本身以外的所有事件

$('div').on('click',function(event){
    // event.stopPropagation();         //阻止冒泡
    event.stopImmediatePropagation();   //下面的事件也不会执行
    console.log('clicked %o',$(this));
}).on('click',function(event){
    console.log('clicked2 %o',$(this));
})

//isDefaultPrevented()              :是否调用了preventDefault()
//isPropagationStopped()            :是否调用了stopPropagation()
//isImmediatePropagationStopped()   :是否调用了stopImmediatePropagation()

触发事件

//trigger(eventType[,data])
//triggerHandler(eventType[,data])  

//triggerHandler相比trigger:
//不会触发浏览器默认事件
//不会产生事件冒泡
//只触发jQuery对象集合中第一个元素的事件处理函数
//返回的是事件处理函数的返回值，而不是jQuery对象

// 一般的事件触发
$('li').on('click',function(event){
    console.log('已读 %o',$(this));
    return '123';
})
$('#all').on('click',function(){    
    console.log($('li').trigger('click'));          // 触发所有li元素的click事件
    console.log($('li').triggerHandler('click'));   // 触发第一个里元素的click事件
})

// 带数据的事件触发
$('li').on('click',function(event,arg1,arg2){
    console.log('已读 %o',$(this));
    return '123';
})
$('#all').on('click',function(){
    $('li').trigger('click',[1,2]);
})

快捷方法

blur，change，click，dblclick，focus，focusin，focusout，keydown，keypress，keyup
mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup
ready，resize，scroll，select，submit

//绑定事件：eventName([data,]handler)
//触发事件：eventName()

// 绑定事件
$('li').click(function(event){
    console.log('已读 %o',$(this));
    return '123';
})
//触发事件
$('#all').on('click',function(){
    $('li').click();    //触发事件
})

hover

//hover方法
//jQuery自带的方法，浏览器并不具备
//目的是为了弥补onmouseover()和onmouseout()的不足

function report(event){
    event.stopPropagation();
    console.log(event.type + ' on ' + event.target.id);
}

// 不足：在鼠标移入inner1的时候，会触发outer1的mouseout事件，这不是我们想要的效果
$('#outer1').on('mouseover mouseout',report);
$('#inner1').on('mouseover mouseout',report);

// 在鼠标移入inner1的时候，只会触发inner1的mouseover事件，这是我们想要的效果
$('#outer2').hover(report);
$('#inner2').hover(report);

自定义事件

// on(customEvent)
// trigger(customEvent)

$('li').on('markAsRead',function(event){
    console.log('已读 %o',$(this));
}).on('click',function(){
    $(this).trigger('markAsRead');
})

$('#all').on('click',function(){
    $('li').trigger('markAsRead');
})

事件命名空间

// eventName.namespace

$('li:odd').on('click.even',function(e){
    console.log('%o 偶数',$(this))
})
$('li:even').on('click.odd',function(e){
    console.log('%o 奇数',$(this))
})
$('li').eq(0).on('click.even.0',function(e){
    console.log('%o 0',$(this))
})

$('#even').click(function(){
    $('li').trigger('click.even');      //同时会触发even的子命名空间内容（也就是even.0）
})

$('#odd').click(function(){
    $('li').trigger('click.odd');
})

//删除事件
$('li').off('.even');   //删除even的所有命名空间