[jQuery教程]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( "Hello " + event.data.name ); //Hello 码云笔记 } $( "button" ).on( "click", { name: "码云笔记" }, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
以上都是 on 方法基本用法,下去大家可以试一下。
on()的高级用法
针对自己处理机制中,不仅有 on 方法,还有根据 on 演变出来的 live 方法(1.7 后去掉了),delegate 方法等等。这些方法的底层实现部分 还是 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教程]jQuery事件的绑定和解绑(十二)