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. 2018 HDU多校第四场赛后补题

    2018 HDU多校第四场赛后补题 自己学校出的毒瘤场..吃枣药丸 hdu中的题号是6332 - 6343. K. Expression in Memories 题意: 判断一个简化版的算术表达式是否 ...

  2. IPFS扫盲

    第二届深圳区块链技术与应用大会暨展览会,深圳区块链存储与IPFS技术应用大会暨展览会于2019年4月9日在深圳会展中心6号馆举行.那么这个IPFS是什么?和区块链有什么关系?有什么用?又怎么用呢?接下 ...

  3. Oracle单机Rman笔记[3]---RMAN脱机备份及命令基础介绍

    A.NOARCHIVELOG模式下的物理备份 1.完全关闭数据库 2.备份所有的数据库文件.控制文件.联机重做日志 3.重新启动数据库 B.RMAN的体系结构概述 重新构建控制文件: 将控制文件备份为 ...

  4. php中微信开发的转发分享

    简单来说  ,一共四步 1.  微信公众平台中公众号设置”的“功能设置”里填写“JS接口安全域名”.该域名填写你的项目的域名. 2. 下载jssdk的damo,https://mp.weixin.qq ...

  5. Phoenix安装

    第一步: 安装erlang虚拟机: 第二步: 安装Elixir Add Erlang Solutions repo: wget https://packages.erlang-solutions.co ...

  6. 总结get和post区别---面试用

    总结get和post区别---面试用 我是搬运工!!!! get参数通过url传递,post放在request body中. get请求在url中传递的参数是有长度限制的,而post没有. get比p ...

  7. swiper 不同页面高度自适应

    在使用swiper写页面滑动时发现不同页面高度无法自适应,使用autoHeight:true也不起作用 研究了一下发现可以这样设置 .swiper-slide{ overflow: hidden; } ...

  8. 【转载】用实例给新手讲解RSA加密算法

    实践文章:https://mp.weixin.qq.com/s/dCQ17NKWu5ISc-eNhFDlvw 原文地址:http://bank.hexun.com/2009-06-24/1189585 ...

  9. from jobscrawler_qianchengwuyou.items import JobscrawlerQianchengwuyouItem

    -- coding: utf-8 -- import scrapy from jobscrawler_qianchengwuyou.items import JobscrawlerQianchengw ...

  10. ts文件分析(纯c解析代码)

    参考链接: 1. MPEG-2 TS码流分析 https://blog.csdn.net/zhubin215130/article/details/8958567 TS Header PAT PMT ...