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 );

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

<h2>on绑定多事件</h2>

<h4>测试一</h4>
    <div class="left">
        点击触发:on('click',fn)
        <div id="test1"></div>
    </div>
    <script type="text/javascript">
    //事件绑定一
    $("#test1").on('click', function(e) {
        $(this).text('触发事件:' + e.type)
    })
    </script>

<h4>测试二</h4>
    <div class="left">
        点击触发:on('mousedown mouseup')
        <div id="test2"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定一
    $("#test2").on('mousedown mouseup', function(e) {
        $(this).text('触发事件:' + e.type)
    })
    </script>

<h4>测试三</h4>
    <div class="right">
        点击触发:on(mousedown:fn1,mouseup:fn2)
        <div id="test3"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定二
    $("#test3").on({
        mousedown: function(e) {
            $(this).text('触发事件:' + e.type)
        },
        mouseup: function(e) {
            $(this).text('触发事件:' + e.type)
        }
    })
    </script>

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元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数

<h2>on事件委托</h2>
    <div class="left">
        <a>陈咪咪</a>
        <div class="aaron">
            <a>111</a>
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制,点击a元素的时候,事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>

卸载事件off()方法

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

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

绑定2个事件

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

删除一个事件

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

删除所有事件

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

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

$("elem").off()

 <h2>删除事件</h2>

    <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击删除mousedown事件</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })     //删除事件
    $("button:first").click(function() {
        $(".aaron:first").off('mousedown')
    })
   
    </script>     <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击销毁所有事件off</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:last").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })     //删除事件
    $("button:last").click(function() {
        $(".aaron:last").off()
    })
   
    </script>

jQuery-3.事件篇---事件绑定与解绑的更多相关文章

  1. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  2. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  3. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  4. Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)

    文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...

  5. Service的启动与停止、绑定与解绑

    ---恢复内容开始--- Service的意义就在于当软件停止之后还可以在背景中进行运行,换句话也就是说,比如一个音乐播放器,当我们退出音乐播放器的时候,还是希望它在背景中运行,也就是一直播放着音乐, ...

  6. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  7. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  8. jQuery之_事件绑定与解绑

    使用jQuery实现事件的绑定和解绑 就是所谓的事件操作. 1. 事件绑定(2种): * eventName(function(){}) 绑定对应事件名的监听, 例如:$('#div').click( ...

  9. jquery中事件重复绑定以及解绑问题

    一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...

  10. jQuery事件绑定,解绑,触发

    事件绑定 1.bind(type,[data],fn) --type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"click"或"submit" ...

随机推荐

  1. os.path官方文档(附翻译)

    This module implements some useful functions on pathnames. To read or write files see open(), and fo ...

  2. 使用 ZipArchive 生成Zip文件备注

    近两日研究了Abp.io 中模板项目的生成原理,是从Github下载源码包,进行修改.替换,然后生成新的zip包提供下载. 项目内部使用了  这个包 Ionic.Zip  Version=" ...

  3. javascript 十进制转换为二进制

    1.十进制转换为二进制 var toBin = (n) => { if(n == 0) return '0'; var res = ''; while(n != 0) { res = n % 2 ...

  4. import com.sun.org.apache.xerces.internal.impl.dv.util.Base64报错

       该类不属于JDK标准库范畴,但在JDK中包含了该类,可以直接使用.但是在eclipse中直接使用却找不到该类. 以下是解决方法步骤: Properties-->JavaBulid Path ...

  5. balcanced-binary-tree

    题目描述 Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bi ...

  6. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. JavaScript “函数重载”

    函数重载(function overloading)必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力. JavaScript的每个函数都带有一个仅在这个函数范围内作用的变量argume ...

  8. 编译libcurl支持https协议

    编译与安装参考:http://www.cnblogs.com/openiris/p/3812443.html 注意事项:先下载安装完nasm和perl再打开控制台(需要将nasm安装路径添加到Path ...

  9. selenium的三种等待方式

    selenium有三种等待方式 1.time.sleep() 设置等待最简单的方法就是强制等待,但一般不建议使用,可以在调试的时候进行使用 2.隐性等待 driver.implictily_wait( ...

  10. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...