web前端开发个人技术博客
当前位置: 前端技术 > [jQuery教程]jQuery事件的绑定和解绑(十二)

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

2018-12-21 分类:前端技术 作者:码云 阅读(4043)

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

本章介绍事件的绑定和解绑知识,掌握如何对相应元素进行事件的绑定和解绑。

on()的多事件绑定

之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法:.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同。

1
2
$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看

多个事件绑定同一个函数

1
$("#elem").on("mouseover mouseout",function(){ });

通过空格分离,传递不同的事件名,可以同时绑定多个事件

多个事件绑定不同函数

1
2
3
4
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法

将数据传递到处理程序

1
2
3
4
5
6
function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 码云笔记
}
$( "button" ).on( "click", {
  name: "码云笔记"
}, greet );

可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的

以上都是on方法基本用法,下去大家可以试一下。

on()的高级用法

针对自己处理机制中,不仅有on方法,还有根据on演变出来的live方法(1.7后去掉了),delegate方法等等。这些方法的底层实现部分 还是on方法,这是利用了on的另一个事件机制委托的机制衍变而来的

委托机制

1
.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器,简单的来描述下,参考下面3层结构:

1
2
3
4
5
<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

给出如下代码:

1
$("div").on("click","p",fn)
1
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数

卸载事件off()方法

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

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

绑定2个事件:

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

删除一个事件:

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

删除所有事件:

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

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

1
$("elem").off()

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - [jQuery教程]jQuery事件的绑定和解绑(十二)

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论