JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议,
只需要知道在DOM2中规定的事件流包括了三个部分,事件捕获阶段、处于目标阶段、事件冒泡阶段。
1.事件捕获
事件捕获,是从document元素开始,越高级的父级元素越早接收到事件,因此这是一个从上而下的过程。
A): 坑一:新插入的子元素没有绑定点击事件
一个ul元素中初始的状态有4个li元素,我们可以循环给li元素添加click事件,执行我们想要的动作。这个例子的坑就在于,新添加的li元素不会有我们绑定的click事件。
我们可以使用事件捕获处理这个问题
在上面的解决方案中,我并不是直接给li绑定事件,而是给所有li的父级ul绑定事件。根据事件捕获的原理,事件会自上而下传递给li,我们只需要通过一些简单的条件判断来确定我们的目标元素即可,如上例中的判断li的className。
2.如果目标元素有子元素 那么怎么办
当我们在使用className判断目标元素时,会遇到这样的情况。
当我们试图使用事件委托希望给所有的li添加元素时,在利用className判断的过程中发现,目标event.target元素居然是li.item的子元素,这个时候就没办法准确的将事件绑定到li上了,这个时候我们应该怎么办?这个时候我们就要阻止事件的捕获传递。那么怎么去阻止呢?
所知道的一种方式就是 利用css 给li所有的子元素添加css属性
JS 事件冒泡整理 浏览器的事件流的更多相关文章
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js 停止事件冒泡 阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...
- js 停止事件冒泡 阻止浏览器的默认行为(比如阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...
随机推荐
- js生成随机数的方法小结
js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...
- Aspose.Cells for .NET 8.5.0 工具类
基于 Aspose.Cells for .NET 8.5.0 工具类, Aspose.Cells for .NET 8.5.0 这个自己去CSDN下载里面有破解的,没有破解的导出excel的时候会(A ...
- 一步一步教你使用Git
一步一步教你使用Git 互联网给我们带来方便的同时,也时常让我们感到困惑.随便搜搜就出一大堆结果,然而总是有大量的重复和错误.小妖发出的内容,都是自己实测过的,有问题请留言. 现在,你已经安装了Git ...
- ORA-04021
编译或删除存储过程的时候,系统会卡住,一段时间后出现ora-04021错误. 1.可能被锁住查看v$locked select b.sid,b.serial#,b.machine,b.terminal ...
- cas+tomcat+shiro实现单点登录-4-Apache Shiro 集成Cas作为cas client端实现
目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...
- polya定理小结
polya的精髓就在与对循环节的寻找,其中常遇到的问题就是项链染色类问题. 当项链旋转时有n种置换,循环节的个数分别是gcd(n, i); 当项链翻转时有n种置换,其中当项链珠子数位奇数时,循环节的个 ...
- jQuery1.9(辅助函数)学习之——.serialize();
$("form").serialize(); 返回一个String 描述: 将用作提交的表单元素的值编译成字符串,这个方法不接受任何参数. .serialize(); 方法使用标 ...
- zendguard安装破解
http://www.thefox.cn/zend-guard.shtml 到官网下载6.0版本安装后 URL: http://www.zend.com/en/products/guard/downl ...
- Jquery 网站保存信息提示消息实现,提示后自动消失
现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失 css <style> #tip_message { z-in ...
- python学习第十天 -- 函数
稍微学过其他编程语言的人都应该了解函数的概念.在这里就不做过多的介绍. Python内置了很多有用的函数,我们可以也直接调用. 可以直接从Python的官方网站查看文档: http://docs.py ...