jQuery事件模型
优点:
1. 提供了统一的事件处理方法
2. 允许添加多个事件处理函数
3. 使用标准的事件名称(不带on)
4. 事件实例作为事件处理函数的第一个参数
5. 标准化事件实例最常用的属性
6. 提供了统一的事件取消和阻止默认行为的方法
添加事件处理
参数说明:
事件类型
、选择器
、数据
、事件处理函数
。
选择器、数据为可选参数。
数据在事件处理函数内部,以event的data属性存在。
实例:
$('div').on('click','#p1-1',{foo : 'bar'},function(event){
console.log(%o , event.data);
})
// %o 就是一个控制台占位符,只是把后面的内容显示出来
一次性事件处理
参数和on()方法一样。
除了直接给目标元素绑定事件,我们还可以给其父元素绑定事件,利用冒泡机制,产生同样的效果。
通过event.target指定实际发生事件的元素。
实例:
$('ul').on('click',function(event){
console.log('%o clicked',$(envent.target));
})
stopPropagation() 阻止冒泡
preventDefault() 阻止默认行为
return false 同时阻止冒泡和默认行为
移除事件处理
不带任何参数,就会把所有事件都给移除掉。
如果是要取消多个事件类型,就用空格隔开。
实例:
$('ul').on('click',function(event){
console.log('%o clicked',$(envent.target));
})
$('ul').off('click');
支持的事件
事件实例对象
标红的属性,有浏览器兼容性问题。
preventDefault() 阻止默认行为
stopPropagation() 阻止事件冒泡
stopImmediatePropagation() 阻止事件冒泡以及后续相同类型事件
ispreventDefaulted() 检测是否调用了preventDefault()
isPropagationStopped() 检测是否调用了stopPropagation()
isImmediatePropagationStopped() 检测是否调用了stopImmediatePropagation()
触发事件(主动)
trigger(eventType[,data])
triggerHandler(eventType[,data])
triggerHandler不能触发链式运动。
trigger更接近用户真实行为,triggerHandler则是主要为了触发事件处理函数。
现在有一组li和一个button,点击button,主动触发li绑定的click的事件。
$('li').on('click',function(event){
console.log('已读 %o',$(this));
return '123';
})
$('button').on('click',function(){
//让li,主动触发click事件
//所有li都被触发
$('li').tiggle('click');
//只有第一个li被触发
$('li').tiggleHandler('click');
})
快捷事件方法
eventName([data,]handler)
eventName()
$('li').click(function(event){
console.log('已读 %o',$(this));
})
hover事件
主要是弥补onmouseover、onmouseout的不足。
看个例子
如果采用onmouseover、onmouseout,鼠标进入outer1的时候没问题,会触发outer1的onmouseover。
但是鼠标进入inner1的时候,却触发了outer1的onmouseout事件。
语法
hover(enterHandler , leaveHandler)
hover(handler)
自定义事件
jQuery通过on()方法,可以绑定原生事件。
trigger()方法,提供给我们主动触发事件的能力。
组合使用,我们便可以实现自定义事件了。
$('#elem').on('自定义事件类型', function(event,arg1,arg2) {
// 执行代码块
});
$('#elem').trigger('自定义事件类型',['参数1','参数2'])