[jQuery教程]jQuery事件的绑定和解绑(十二)

目录
文章目录隐藏
  1. on()的多事件绑定
  2. on()的高级用法
  3. 卸载事件 off()方法

[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()方法

  1. 通过.on()绑定的事件处理程序
  2. 通过 off() 方法移除该绑定

根据 on 绑定事件的一些特性,off 方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

绑定 2 个事件:

$("elem").on("mousedown mouseup",fn)

删除一个事件:

$("elem").off("mousedown")

删除所有事件:

$("elem").off("mousedown mouseup")

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁:

$("elem").off()

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [jQuery教程]jQuery事件的绑定和解绑(十二)

发表回复