理解jquery on 委托事件的机制
前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个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 委托事件的机制的更多相关文章
- Jquery中的事件命名机制
来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- jQuery新的事件绑定机制on()
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...
- jQuery新的事件绑定机制on()示例应用
投稿:whsnow 字体:[增加 减小] 类型:转载 从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下 ...
- javascript模拟jQuery封装委托事件,兼容IE
var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...
- 委托事件(jQuery)
<div class="content"> <ul> <li>1</li> <li>2</li> <l ...
- Android View的事件分发机制探索
概述 Android事件传递机制也是Android系统中比较重要的一块,事件类型有很多种,这里主要讨论TouchEvent的事件在framework层的传递处理机制.因为对于App开发人员来说,理解f ...
- JS:事件循环机制、调用栈以及任务队列
点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...
- JQuery中绑定事件(bind())和移除事件(unbind())
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...
随机推荐
- 大数据入门第六天——HDFS详解
一.概述 1.HDFS中的角色 Block数据: HDFS中的文件在物理上是分块存储(block),块的大小可以通过配置参数( dfs.blocksize)来规定,默认大小在hadoop2.x版本中是 ...
- 2017-2018-1 20155320第十周课下作业-IPC
2017-2018-1 20155320第十周课下作业-IPC 研究Linux下IPC机制:原理,优缺点,每种机制至少给一个示例,提交研究博客的链接 共享内存 管道 FIFO 信号 消息队列 共享内存 ...
- JavaWeb总结(五)
使用Servlet接受服务器请求信息 HTTP请求示例 HttpServletRequest对象主要用于获取由客户端发送过来的请求头.参数.文件.数据等.Servlet存在的主要目的就是处理请求.Se ...
- 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。
关于 ES6: 需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.a ...
- [VB.NET][C#]二维向量的基本运算
前言 在数学中,几何向量指具有大小(Magnitude)和方向的几何对象,它在线性代数中经由抽象化有着更一般的概念.向量在编程中也有着及其广泛的应用,其作用在图形编程和游戏物理引擎方面尤为突出. 基于 ...
- BootStap学习笔记(1)
移动设备优先: 为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meat标签:如下: <metaname="viewport& ...
- 180813-Spring之RestTemplate使用小结一
Spring之RestTemplate使用小结 作为一个Java后端,需要通过HTTP请求其他的网络资源可以说是一个比较常见的case了:一般怎么做呢? 可能大部分的小伙伴直接捞起Apache的Htt ...
- Jmeter接口测试(五)变量及参数化
在请求过程中,有时我们需要在请求中设置一些变量来测试不同的场景. 提示:在调试请求过程中,无关的请求可以暂时禁用掉,选择某个暂时不用的请求,右键--禁用 Jmeter 支持以下类型变量:所有类型的变量 ...
- linux常用命令总结(含选项参数)
• 用户切换 su 切换到root用户并不切换环境 su - root 切换到root用户并切换环境 su redhat 切换到redhat不切换环境 • cd切换目 ...
- 下一代的DevOps服务:AIOps
AIOps是一个总称,用于指代使用复杂的基础设施管理软件和云解决方案监控工具来实现自动化数据分析和日常的DevOps操作. 那些10年前甚至是5年前构建的系统监控工具的主要缺陷是它们不是为了满足大数据 ...