js事件机制----捕获与冒泡机制实例分析

本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考，具体如下：

先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现,

语法格式如下:

element.addEventListener(event, function, useCapture)

参数值

参数 描述
event 必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

我们可以看到第三个参数是布尔值, true表示在捕获阶段执行, 而false指在冒泡阶段执行

所以什么是 捕获和冒泡?

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递,

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

这里举个简单的例子:

点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="父级">
 <div id="儿子">
  <div id="孙子" style="width:100px; height:100px; background-color:yellow">
  </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 var a = document.getElementById('父级'),
 b = document.getElementById('儿子'),
 c = document.getElementById('孙子');
 a.addEventListener("click",show, true);
 b.addEventListener("click",show, true);
 c.addEventListener("click",show, true);
 console.log("前3为捕获,后三个为冒泡");
 a.addEventListener("click",show, false);
 b.addEventListener("click",show, false);
 c.addEventListener("click",show, false);
 function show(even){ console.log(this.id); }
</script>
</html>

其中两条孙子输出相同被折叠了, 可以看到前三个是以捕获顺序, 第三个参数为true, 顺序是从父亲到孙子

后三个为false意思是冒泡顺序, 顺序是孙子到父级,即从内到外

实际上捕获和冒泡时最外层和的元素并不是父级div,

捕获时实际上是:

document-->html-->body-->父级div-->儿子div-->孙子div

冒泡时相反, 只不过body及以上没添加事件并输出, 所以在例子中没显现出来

所以用冒泡还是捕获？

　　对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js点击事件的执行过程实例分析【冒泡与捕获】

    本文实例讲述了js点击事件的执行过程.分享给大家供大家参考,具体如下: js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡. 首先看下当我们点击一个元素后,浏览器的执行过程. 1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流 2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段 说明:捕获阶段,在查找每一层dom

  • js事件冒泡、事件捕获和阻止默认事件详解

    js事件冒泡、事件捕获和阻止默认事件详解

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

  • JavaScript事件冒泡机制原理实例解析

    这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head>

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出

  • JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. 第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>b

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p

  • Javascript 事件冒泡机制详细介绍

    Javascript 事件冒泡机制详细介绍

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2.冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中,气泡会经过不同深度层次的水. 相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树:事件从dom 树的

  • javascript事件冒泡详解和捕获、阻止方法

    一.事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 复制代码 代码如下: ----------------------------------- | element1                        | |   -------------------------     | |   |element2               |     | |   -------------------------     | |                 

  • js冒泡、捕获事件及阻止冒泡方法详细总结

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结. 事件冒泡是一个从子节点向祖先节点冒泡的过程: 事件捕获刚好相反,是从祖先节点到子节点的过程. 给一个jquery点击事件的例子: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>test</title> <head> <scrip

随机推荐