前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个a,的点击事件都是用on绑定的。所以在阻止冒泡的时候不管用,今天特意来理解一下on的机制

on 是委托事件,利用的就是冒泡原理

$(selector).on(event,[selector],handler);

selector 如果为空,表示的就是目标元素就是所选元素,如果有值代表的是符合所选元素的所有后代元素

实际上,事件委托的事件处理函数是当被委托的元素上的事件触发时判断e.target后执行,而不是目标元素上的事件被触发后就立即执行,在没有阻止冒泡的情况下,事件还是一层层传播的,只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则,点击li元素后,click事件是从li至ul至ul父元素一层层冒泡上去的,沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上,调用了stopPropagation,就阻止了事件从ul继续向上冒泡,而不是阻止事件从li向上冒泡。这样从ul开始,ul及其祖先元素上的事件冒泡被阻止。

重要说明

如果传递了selector参数,那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数on()函数并不是直接为这些后代元素挨个绑定事件,而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素selector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器selector,jQuery就会捕获该事件,从而执行绑定的事件处理函数

通俗易懂地说,如果我们希望给页面上所有的<P>标签绑定click事件处理函数,我们可以在每个P标签上直接分别绑定click事件处理函数。例如:

// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);

我们也可以在这些P标签的任意一个公共祖辈元素上绑定事件委托机制,利用DOM的事件冒泡机制来统一委托处理。当我们触发了某个元素的click事件,JS会依次通知该元素及其"父辈"元素、"爷爷辈"元素……直到最顶部的document对象为止,如果这些元素上绑定了click事件处理函数就会依次执行。

// 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler
$(document.body).on("click", "p", handler);

在这里的示例中,事件委托机制就是,我们不为每个P元素直接绑定click事件处理函数,而是委托给其某个公共的祖辈元素(此处示例中为document.body),"告诉"他:如果接收到了click事件触发通知,并且这个click事件是由我们这些P元素其中之一触发的,就执行祖辈元素上委托绑定的事件处理函数。

如果在后代元素中阻止了冒泡,他就不会传递到祖辈,

直接在后代中为每个后代元素执行事件和函数

例子

$("ul").on('click',function(){

console.log('我是父级ul');

})

$('ul').on('click','li',function(e){

e.stopPaptration();//为了不让点击li 使得他们的父级的事件也触发了,就阻止冒泡,这样就只为所有的li 执行事件,不会再执行到ul上去

cnosole.log($(this).text());//当前被点击的那个li

})

如果是实现点击任意地方关闭的话,要这样写

$(document).on('click','li',function(e){

e.stopPaptration(); //阻止冒泡

})

这样之后点击li元素本身的话,他不会冒泡到document上。也就不会关闭 li .

$(document).on('click',function(){

$('li').hide();

})

理解jquery on 委托事件的机制的更多相关文章

  1. Jquery中的事件命名机制

    来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...

  2. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  3. jQuery新的事件绑定机制on()

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...

  4. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  5. javascript模拟jQuery封装委托事件,兼容IE

    var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...

  6. 委托事件(jQuery)

    <div class="content"> <ul> <li>1</li> <li>2</li> <l ...

  7. Android View的事件分发机制探索

    概述 Android事件传递机制也是Android系统中比较重要的一块,事件类型有很多种,这里主要讨论TouchEvent的事件在framework层的传递处理机制.因为对于App开发人员来说,理解f ...

  8. JS:事件循环机制、调用栈以及任务队列

    点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...

  9. JQuery中绑定事件(bind())和移除事件(unbind())

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...

随机推荐

  1. BZOJ2120_数颜色_KEY

    题目传送门 裸的带修莫队. 在Sort时如果左右区间都在同一块中,就按询问的修改的先后Sort. 对于每次查询判断向前或向后修改. 当size为N*2/3时据说是最优.O(N^(3/5)). code ...

  2. c++ 标准流文件

    一.标准流stdin,stdout,stderr   标准输入流stdin: 是程序可以读取其输入的位置.缺省情况下,进程从键盘读取 stdin . fscanf(stdin,"%d%d%f ...

  3. #6435. 「PKUSC2018」星际穿越

    考场上写出了70分,现在填个坑 比较好写的70分是这样的:(我考场上写的贼复杂) 设\(L(i)=\min_{j=i}^nl(j)\) 那么从i开始向左走第一步能到达的就是\([l(i),i-1]\) ...

  4. Hbase第五章 MapReduce操作HBase

    容易遇到的坑: 当用mapReducer操作HBase时,运行jar包的过程中如果遇到 java.lang.NoClassDefFoundError 类似的错误时,一般是由于hadoop环境没有hba ...

  5. css快速入门-引入方式

    一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 &l ...

  6. 使用Serilog输出到ES(使用笔记)

    第一步:安装Serilog 使用NuGet包安装以下组件: Serilog.AspNetCoreSerilog.Settings.ConfigurationSerilog.Sinks.ConsoleS ...

  7. python图像处理(1)图像的打开与保存

    使用python进行图像处理时有三种库可以使用分别是:PIL.matplotlib.pyplot.opencv(opencv未接触) 注意:matplotlib读取进来的图片是unit8,0-255范 ...

  8. Unity生成简易二维码

    最近项目需求,需要在Unity中动态生成二维码.所以就研究了一下,下面把动态生成二维码的方法向大家分享一下. 第一种方法 需要一个 ZXing.dll文件. 下载地址我会在文章结尾给出. 直接将下载好 ...

  9. OpenGL学习笔记(3) 纹理

    关于纹理 一般游戏里的物体不一定都是纯色的物体,物体上面会有一些图片贴在上面,比如墙壁,箱子,地板,可以看到砖头.木板和大理石组成的图片,要把图片贴到计算机里的几何图形的话,就要把图片的颜色采样贴到几 ...

  10. python打印对象的所有可操作内容

    print('\n'.join(['%s:%s' % item for item in 对象.__dict__.items()]))