javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。...

2018年12月13日更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul li{border: 1px solid yellow;}</style>
</head>
<body>
<p hidden>This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<div id="ysr" style="border: 1px solid red;background-color: green;padding: 50px;"><ul id="ljl"><li id="1">aaaaaaaaa</li><li id="2">aaaaaaaaa</li><li id="3">aaaaaaaaa</li><li id="4">aaaaaaaaa</li><li id="5">aaaaaaaaa</li><li id="6">aaaaaaaaa</li><li id="7">aaaaaaaaa</li><li id="8">aaaaaaaaa</li><li id="9">aaaaaaaaa</li></ul>
</div>
<script>var ljl = document.getElementById('ljl');ljl.onclick = function (ev) {console.log(ev);console.log(ev.target);alert('in');ev.stopPropagation();};function doSth(){alert('---a---');}function doSth2(){alert('---ysr---');}ljl.addEventListener('click',doSth,true)var ysr = document.getElementById('ysr');ysr.addEventListener('click',doSth2,true)ysr.onclick = function (ev) {console.log(ev);console.log(ev.target);alert('in another');}</script>
</body>
</html>

  

----------------------------------------------------------------------------------------------------------------------------------------------------------

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的。什么是事件冒泡?

什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层。这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层。而你不管在水的哪一层观察都可以看到并捕捉到这个气泡。好了,把“水”改成“DOM”,把“气泡”改成“事件”。这就是“事件冒泡”

 

什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate

One of the hot methodologies in the JavaScript world is event delegation, and for good reason.  Event delegation allows you to avoid adding event listeners to specific nodes;  instead, the event listener is added to one parent.  That event listener analyzes bubbled events to find a match on child elements.  The base concept is fairly simple but many people don't understand just how event delegation works.  Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.

下面是我在csdn找到的一篇解释,写的不错。原文地址:http://blog.csdn.net/iefreer/article/details/8573940

1、Event是什么?

event是用户操作网页时发生的交互动作,比如click/move, event除了用户触发的动作外,还可以是文档加载,窗口滚动和大小调整。

2、Event模型是什么?

Event模型指的是浏览器如何处理发生的事件。不同的浏览器其处理机制也不尽相同,甚至截然相反。

一般而言,某个界面元素发生单个事件,那么事件的处理对象就是该界面元素。

但一个典型的问题是如果该界面元素存在父子元素,而且父子元素也定义了同样的事件,

这个时候事件该如何处理呢,事件在父子元素之间是如何传递的呢,谁会先接收到这个事件,又是谁先处理呢?

 

举个例子:

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

element2是element1的子元素,两者都定义了onclick事件。

这就是事件模型(事件序列)要解决的问题。

两种模型

回到网景和微软斗争的年代,两个公司选择了不同的道路:

网景选择的是事件捕获(event capturing)模型,即网景认为element1首先获取到事件;

微软选择了和其桌面系统类似的消息机制,认为element2有更高的优先权,即事件冒泡(event bubbling),

这两个模型截然相反,IE仅支持event bubbling. Mozilla, Opera 7等两种都支持. 更老版本的Opera和iCab两种都不支持。

你现在也许体会到了什么是互联网最初那最好也最坏的年代。

 

 

事件捕获

                   | |
--------------- | |-----------------
| element1      | |                |
|   -----------    | |-----------     |
|   |element2   \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

看上面箭头的方向,element1的事件处理器首先被触发,然后向下传递到element2

 

事件冒泡

 

                 / \
--------------| |-----------------
| element1   | |                |
|   ----------- | |-----------     |
|   |element2 | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

与事件捕获相反,element2的事件处理器会首先被触发。

 

 

W3C模型

W3C非常理智的处理了这种差异,在两者之间采取了中和的方法,W3C模型规定任何事件首先会被捕获直到遇到目标元素,然后再向上返回。

 

                     | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   ---------------| |--| |-----------     |
|   |element2    \ /   | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

 

WEB开发人员可以通过addEventListener()方法来选择在哪个阶段注册事件处理器(捕获阶段还是冒泡阶段),这个方法在Advanced models中有详细描述,其最后一个参数为true,则代表事件在捕获阶段被处理,false则代表事件在冒泡阶段被处理。

 

比如:

 

element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)

事件首先被element1捕获,然后执行doSomething2,接着事件传递给element2,doSomething被执行,接着,事件冒泡回溯,检查是否有父元素(element1)定义了冒泡阶段的事件处理器,这里没有,所以事件终止。

 

 

兼容传统模型

 

在支持W3C DOM的浏览器中,传统的事件注册被看作是注册于冒泡阶段。

element1.onclick = doSomething2;
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
例子: 原地址:http://www.pureweber.com/article/event-delegation/
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><style>.white{background-color:#fff;}#d1{width:400px;height:400px;border:1px solid #000;margin:50px 50px;}#d2{width:300px;height:300px;border:1px solid #000;margin:50px 50px;}#d3{width:200px;height:200px;border:1px solid #000;margin:50px 50px;}#d4{width:100px;height:100px;border:1px solid #000;margin:50px 50px;}</style><script src="./lib/js/jquery-2.1.3.js"></script></head><body>
<div id="d1" class="white"><div id="d2" class="white"><div id="d3" class="white"><div id="d4" class="white"></div></div></div>
</div>
<button id="reset1">重置</button>
</body>
<script>$('#d4').bind('click', function(e){e.stopPropagation();alert('冒泡被阻止,这块将不会改变颜色');});jQuery('#d1').click(function(e){var t = jQuery(e.target);var id = t.attr('id');if (id==='d4'){t.css('background-color', 'yellow');} else if (id==='d3') {t.css('background-color', 'green');} else if (id==='d2') {t.css('background-color', 'blue');} else {t.css('background-color', 'red');}});jQuery('#reset1').click(function(){jQuery('.white').css('background-color', '#fff')});/*jQuery('#d4').click(function(){jQuery(this).css('background-color', 'yellow')});jQuery('#d3').click(function(){jQuery(this).css('background-color', 'green')});jQuery('#d2').click(function(){jQuery(this).css('background-color', 'blue')});jQuery('#d1').click(function(){jQuery(this).css('background-color', 'red')});jQuery('#reset1').click(function(){jQuery('.white').css('background-color', '#fff')});*/
</script>
</html>

  例子说明:注释的js 作用是显示出(事件冒泡和事件捕捉的):点击最小的那个,外面所有的都会被上色。你会发现,点击里层的正方形,外层所有的正方形都会被上色。因为它们也都捕捉到了点击事件。。未注释的是:修改上面的程序,使用事件委托来处理点击事件。  当最顶层捕获点击事件时,查看事件来源于哪一层,然后只将那一层涂色。再次点击每一层,查看实际效果。只有当前点击的正方形变色了,其他的都毫无反应。都“委托” 给了最顶层的那个div.当然,如果你有这样嵌套的页面元素,使用了事件委托,委托到了最顶层,这时需要注意:如果其中某个元素,你不希望它的事件冒泡,那么可以使用某种方式阻止事件的冒泡。在jQuery框架中,可以使用stopPropagation()方法来实现而不必关心浏览器兼容性。

事件委托的用途:事件委托是事件冒泡的一个应用,可以减少绑定元素的个数,也不必担心子节点被替换后可能需要进行重新的事件绑定。因为事件的捕获和后续代码的执行已经完全委托给了其父节点。如果页面中含有大量元素需要绑定事件,这样做会减少事件绑定数量,为浏览器减负,无疑会提高页面性能。

转载于:https://www.cnblogs.com/oxspirt/p/4446564.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 序列化 java_PHP--序列化与反序列化详解

PHP--序列化与反序列化详解博客说明文章所涉及的资料来自互联网整理和个人总结&#xff0c;意在于个人学习和经验汇总&#xff0c;如有什么地方侵权&#xff0c;请联系本人删除&#xff0c;谢谢&#xff01;说明所有php里面的值都可以使用函数serialize()来返回一个包含字节流的…

hadoop2.x的变化

HDFS Federation&#xff08;HDFS联邦&#xff09; HDFS有两个主要层&#xff1a; Namespace 由目录、文件和块组成&#xff1b;支持所有命名空间对文件和目录的操作。 Block Storage Service 由Block Management和Storage组成。 Block Management 提供dataNode集群成员关系&am…

python enumeration_python枚举防止无效的属性分配

要使枚举类完全“只读”,只需要使用__setattr__hook防止全部的属性分配。因为元类附加到类之后它是创建的,分配正确的枚举值没有问题。就像伊桑的回答一样,我用的是EnumMeta类作为自定义元类的基础:from enum import EnumMeta, Enumclass FrozenEnumMeta(EnumMeta):"Enum …

java wps linux 安装_ubuntu安装Java开发环境

1. 从sun主页JDK for Linux版本。这里的是jdk-6u6--i586.bin.2. 用root用户登录ubuntu&#xff0c;或是在普通用户下用su命令切换用户。切换到所需的安装目录。类型&#xff1a;cd 例如&#xff0c;要在 /usr/java/ 目录中 安装软件&#xff0c;请键入&#xff1a;cd /usr…

[BZOJ 2594] [Wc2006]水管局长数据加强版 【LCT】

题目链接&#xff1a;BZOJ - 2594 题目分析 这道题如果没有删边的操作&#xff0c;那么就是 NOIP2013 货车运输&#xff0c;求两点之间的一条路径&#xff0c;使得边权最大的边的边权尽量小。 那么&#xff0c;这条路径就是最小生成树上这两点之间的路径。 然而现在有了删边操作…

vs升级c++项目遇到的一些问题

1、error C1189: #error : This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x0501 or higher is recommended. 在工程的stdafx.h中&#xff0c;改为如下配置&#xff1a; #ifndef WINVER #define WINVER 0x0501 #endif #ifndef _WIN32_WINNT #def…

python模糊匹配忽略大小写_在python中忽略大小写的简单方法?

如果搜索多个单词&#xff0c;则创建一个集合是有意义的&#xff1a;print(set(brown_sents).intersection(zip(repeat(most_ambiguous_word),word_class_dict[most_ambiguous_word])))输出{(word2, wordclass2), (word2, wordclass3)}要理解它的作用&#xff0c;请将脚本保存到…

IAR7.51提示秘钥无效IAR 以及 CCDebug驱动(包含win7 64bit)

今天IAR不识别我的仿真器&#xff0c;然后我感觉驱动有问题&#xff0c;就把之前的驱动卸载了&#xff0c;但是按照以前的方法按章驱动(选择路径到IAR的某个目录)&#xff0c;提示找不到驱动。。。 也不想重新装个IAR了&#xff0c;于是到CSDN上下载了这个驱动程序&#xff0c;…

cannot be resolved or is not a field

我通常的解决办法&#xff1a;1.看看是不是manifest.xml文件有错误&#xff0c;如果有的话&#xff0c;R.java是不会生成的2.一般来说R.layout.aaa.xml&#xff0c;这里的R是自己的包的R.java&#xff0c;不是android系统的R.java&#xff0c;所以如果引入包的时候有import and…

java解析时已到达文件结尾_IO流读取到文件末尾继续读取

import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;//正常情况//main()方法中第一个read()和和第二个read();是可以顺利执行完的…

百度地图动态显示查询结构

<script type"text/javascript">// 百度地图API功能function G(id) {return document.getElementById(id);}var map new BMap.Map("l-map");map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。var ac …

solr5.0mysql_ik扩展支持Solr配置详解

扩展ik原生代码&#xff1a;public class IKAnalyzerTokenizerFactory extends TokenizerFactory{private boolean useSmart;public boolean useSmart(){return this.useSmart;}public void setUseSmart(boolean useSmart) {this.useSmart useSmart;}public IKAnalyzerTokeniz…

apache htpasswd.exe创建密码

一、使用apache htpasswd.exe创建密码文件&#xff0c;命令请看PHP推荐教程&#xff1a;apache htpasswd命令用法详解 apache htpasswd命令用法实例 1、如何利用htpasswd命令添加用户&#xff1f; 在apache安装目录bin下找到htpasswd #usr/local/apache/bin/htpasswd -bc .pass…

考研复试考java_2019考研复试经验帖:过来人谈5件“小事”

关于复试&#xff0c;决定这你的命运&#xff0c;考生一定要好好把握。关于复试&#xff0c;你做好前期功课&#xff0c;足够了解了吗?下面新东方在线分享一位过来人的经验之谈&#xff0c;给大家最走心的忠告~~▶先来说说复试规则。在复试之前学校会公布学校的复试分数线&…

Hadoop2源码分析-RPC机制初识

1.概述 上一篇博客&#xff0c;讲述Hadoop V2的序列化机制&#xff0c;这为我们学习Hadoop V2的RPC机制奠定了基础。RPC的内容涵盖的信息有点多&#xff0c;包含Hadoop的序列化机制&#xff0c;RPC&#xff0c;代理&#xff0c;NIO等。若对Hadoop序列化不了解的同学&#xff0c…

svn客户端 java_svn纯java客户端SVNKit学习整理(转)

http://www.iteye.com/topic/688217http://blog.csdn.net/feiren127/article/details/7551782把svnkit.jar添加到项目中&#xff0c;用于实现svn功能。 把jackson-all-1.6.2.jar添加到项目中&#xff0c;用于显示树列表。把javaee.ar添加到项目中。新建一个类(SVNUtil.class)实…

贪心 BestCoder Round #39 1001 Delete

题目传送门 1 /*2 贪心水题&#xff1a;找出出现次数>1的次数和res&#xff0c;如果要减去的比res小&#xff0c;那么总的不同的数字tot不会少&#xff1b;3 否则再在tot里减去多余的即为答案4 用set容器也可以做&#xff0c;思路一样5 */6 #include &l…

java this() super()_java中的this和super

this对象本身。public class ThisTest {ThisTest tTest;public ThisTest(){tTest this;}public void test(){System.out.println(this);}public static void main(String arg[]){new ThisTest().test();}}成员方法引用。成员变量引用。public class ThisTest {String name;Str…

配置汇编环境:使用vs2010+MASM

1、将MASM32下载并安装到根目录&#xff08;得到include和lib文件夹&#xff09;&#xff0c;官网即可下载&#xff0c;有64位版本2、配置vs2010 &#xff08;1&#xff09;添加项目 a、新建空白解决方案 b、添加空项目 c、项目属性->生成自定义-&g…

java 抽象类命名_Java的抽象类和接口

一.抽象类首先看抽象方法&#xff1a;抽象方法只有方法签名&#xff0c;没有方法的实现。并且被abstract修饰。 例如&#xff1a; abstract void test();有抽象方法的类只能被定义为抽象类&#xff0c;抽象类里可以没有抽象方法。抽象类的规则&#xff1a;抽象类必须使用abstr…