JS冒泡事件与事件捕获实例详解

2024-09-28 09:32:20

本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下：

案例

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件</title>
  <script type="text/javascript">
    window.onload = function(){
      window.onclick = function(){
        alert("Window"); // 顶级
      };
      document.onclick = function(){
        alert("Document"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次，会按顺序执行两次

4.冒泡的前提是，父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件捕捉</title>
  <script type="text/javascript">
    window.onload = function(){
      window.addEventListener("click", function(){
        alert("Window - true");
      }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - true");
      }, true);
      document.documentElement.addEventListener("click", function(){
        alert("Html - true");
      }, true);
      document.body.addEventListener("click", function(){
        alert("Body - true");
      }, true);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - false");
      }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - false");
      }, false);
      document.documentElement.addEventListener("click", function(){
        alert("Html - false");
      }, false);
      document.body.addEventListener("click", function(){
        alert("Body - false");
      }, false);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - false");
      }, false);
      window.onclick = function(){
        alert("Window - click"); // 顶级
      };
      document.onclick = function(){
        alert("Document - click"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html - click"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body - click"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

Document - false

Document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到

再次改造，阻止冒泡

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件捕捉</title>
  <script type="text/javascript">
    window.onload = function(){
      document.addEventListener("click", function(){
        alert("Document - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - true");
      }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.documentElement.addEventListener("click", function(){
        alert("Html - true");
      }, true);
      document.body.addEventListener("click", function(){
        alert("Body - true");
      }, true);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - false");
      }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - false");
      }, false);
      document.documentElement.addEventListener("click", function(){
        alert("Html - false");
      }, false);
      document.body.addEventListener("click", function(){
        alert("Body - false");
      }, false);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - false");
      }, false);
      window.onclick = function(){
        alert("Window - click"); // 顶级
      };
      document.onclick = function(){
        alert("Document - click"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html - click"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body - click"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
        event.stopPropagation(); // 阻止冒泡
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了，没有后续的内容了

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

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

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

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 1.冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.通俗来讲就是,就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件
javascript事件冒泡和事件捕获详解

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

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

(一)事件绑定 1.普通事件绑定给html添加一个以on开头的特定的属性(如onclick,onfocus); <button id="A" onclick="alert(this.id)">方式一</button> <button id="A" onclick="handler(this)">方式二</button> <script> function handl
浅谈javascript中的事件冒泡和事件捕获

1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML 页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv&q
js之事件冒泡和事件捕获详细介绍

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开
js冒泡、捕获事件及阻止冒泡方法详细总结

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

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

抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,

JS冒泡事件与事件捕获实例详解

相关推荐

随机推荐