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 事件冒泡整理 浏览器的事件流的更多相关文章

  1. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  2. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  3. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  4. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  5. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  7. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  9. js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

随机推荐

  1. Win7_x64下卸载Oracle11g

    Windows下Oracle11g卸载顺序1.计算机管理-->服务和应用程序-->停止所有Oracle相关服务2.运行D:\app\Administrator\product\11.2.0 ...

  2. DOS环境下MySQL使用及不同字符集之间的转换

    mysql -uroot -p; show databses; 创建数据库\c; create database webclass; use webclass; 创建表并设置好各字段的属性\c cre ...

  3. FreeMarker辅助

    /** * FreeMarker 辅助类 * @author Rubekid * */ public class FreeMarkerHelper { /** * 模板文件存放目录 */ privat ...

  4. MYSQL存储过程注释位置

    MYSQL数据库存储过程,像"#“和”/%%/“注释需要写在BEGIN,END语句块里面,否则保存不了,例如: CREATE PROCEDURE HelloWorld() BEGIN #大家 ...

  5. Oracle 11g XML java连接

    在网上找了好多教程 走好好多弯路 现在从头总结下 oralce11g 可以直接用xmltype节点存储xml文件 简单来说就是直接存一个文件进去 首先安装oracle11g 网上教程非常多 然后进Ne ...

  6. JavaWeb学习笔记之Servlet（一）

    1. 引子: 当我们开始进入JavaWeb开发的学习时,我们就必须要和Servlet和HTTP这两个词进行打交道了,尤其是Servlet.即使到了后面使用JSP (我们知道JSP其本身就是一个Serv ...

  7. Spring MVC 之 Hello World

    1.新建一个动态web项目 2.web.xml编写 <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  8. c++中static的使用

    static可以用来修饰变量,包括函数的局部变量,类的成员变量.可以用来修饰函数,包括类的成员函数,普通函数. 今天就只说说static修饰类之外的函数的情况.假设你写了一个head.h,一个a.cp ...

  9. ECSTORE关于MONGODB安装

    1.安装mongodb wget http://www.phpwindow.com/linux/mongodb-linux-x86_64-2.2.1.tgz tar zxvf mongodb-linu ...

  10. ECSTORE验证码优化

    用ecstore的朋友应该知道,ecstore的验证码超级鸡肋. 特别是字母和数字混合,根本就看不懂写的是什么? 数字还好,但是字母就别提了.而且还小. 索性就把验证码换掉.研究一下发现,ecstor ...