脚本宝典收集整理的这篇文章主要介绍了jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
事件的绑定和解绑
on()的多事件绑定
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法
基本用法:.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) // 快捷方式
$("#elem").on('click',function(){}) // on方式
on可以自定义事件名
多个事件绑定同一个函数
// 通过空格分离,传递不同的事件名,可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
// 通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
将数据传递到处理程序
function greet( event ) {
alert( "Miami Heat -- " + event.data.name ); //Miami Heat -- D.Wade
}
$( "button" ).on( "click", { name: "D.Wade" }, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
on()的高级用法
on()的事件委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器,简单的来描述下
参考下面3层结构
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
给出如下代码:
$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过off() 方法移除该绑定
根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off()
事件对象的使用
jQuery事件对象的作用
标准的"click"点击事件
$(elem).on("click",function(event){
event //事件对象
})
在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jquery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象
<ul>
<li class="even1"></li>
<li class="even2"></li>
<li class="even3"></li>
.........
</ul>
上述ul有N个子元素li,如果需要响应每一个li的事件,那么常规的方法就是需要给所有的li都单独绑定一个事件监听,写法符合逻辑,但繁琐。因为li都有一个共同的父元素,而且所有的事件都是一致的,这里我们可以采用要一个技巧来处理,也是常说的"事件委托"
事件没直接和li元素发生关系,而且绑定父元素了。由于浏览器事件冒泡特性,可以在触发li时把这个事件往上冒泡到ul上,因为ul上绑定事件响应,所以能触发这个动作。
事件对象
怎么才知道触发的li元素是哪个一个?这个问题引出了事件对象
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁
事件对象是跟当前触发元素息息相关的,能从里面获取相关的信息,找到 event.target
event.target
target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素