理解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()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...
随机推荐
- uliweb框架数据库操作
先安装数据库和相关的库文件 sudo aptitude install python-setuptools sudo easy_install SQLAlchemy sudo easy_install ...
- 20145209刘一阳《JAVA程序设计》课堂测试总结
20145209刘一阳<JAVA程序设计>课堂测试总结 这次重新学习JAVA这门课,我对本学期没有参与的测试进行了总结并制作成二维码方便老师检查,详细内容如下: 第一周课堂测试### ht ...
- [agc008E]Next or Nextnext-[dp+思考题]
Description 传送门 Solution 官方题解 然后我谈下个人理解.由于我们的两个条件只要任意满足,则在p的图中i有两种连边法:i->p[i],i->p[p[i]]. 我们考虑 ...
- 北京Uber优步司机奖励政策(4月19日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Velocity学习4
Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象. 当Veloci ...
- Wannafly挑战赛18C 异或和
傻逼题,和期望没毛关系... 分开xy坐标,n方直接统计每个坐标的曼蛤顿距离即可.. #include<bits/stdc++.h> #define il inline #define v ...
- (转载)jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...
- 洛谷P1313 计算系数【快速幂+dp】
P1313 计算系数 题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别 ...
- VBA_话费明细单_格式调整
VBA-联通话费明细单-格式调整 Sub ChangeColumn() Rows(1).RowHeight = 24 '设置第1行的行高 Rows(1).WrapText = True '设置第1行的 ...
- SQL查询语句大全及其理解
转自:https://www.cnblogs.com/1234abcd/p/5530314.html 一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删 ...