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的所有命名空间
