主页 / 网络编程 /

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

网络编程 2021-07-04 19:19www.168986.cn编程入门
本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法，具有一定的参考价值，有兴趣的可以了解一下。

事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。

第一部分事件冒泡

即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

狼蚁网站SEO优化举一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bubble</title>
  <style>
    button{
      background: red;
      color:white;
    }
    #third{
      width: 50px;
      height: 50px;
      border:thin solid red;
    }
    #second{
      width: 100px;
      height: 100px;
      border:thin solid red;
    }
    #first{
      width:200px;
      height: 200px;
      border:thin solid red;
    }
  </style>
</head>
<body>
  <div id="first">
    <div id="second" >
      <div id="third" >
        <button id="button">事件冒泡</button>
      </div>
    </div>
  </div>
  <script>

    document.getElementById("button").addEventListener("click",function(){
      alert("button");
    },false);

    document.getElementById("third").addEventListener("click",function(){
      alert("third");
    },false);

    document.getElementById("second").addEventListener("click",function(){
      alert("second");
    },false);    

    document.getElementById("first").addEventListener("click",function(){
      alert("first");
    },false);

  </script>
</body>
</html>

这时，我们只点击button元素，效果如下

可以看到，虽然我们只点击了button元素，，button外的third、second、first上的事件由内向外以此被触发，触发的顺序是由DOM树的下层到DOM树的最上面，故称为冒泡。

（说明尽管这里我使用了DOM2级事件处理程序，并设置每个事件为冒泡阶段发生，即使使用DOM0级，得到的结果也是这样的，冒泡是默认的）

 如果我们不希望事件冒泡呢？那么如何阻止事件冒泡？

实际上，事件的对象有一个sPropagation()方法可以阻止事件冒泡，我们只需要把上个例子中button的事件处理程序修改如下

    document.getElementById("button").addEventListener("click",function(event){
      alert("button");
      event.sPropagation();  
    },false);

这样，点击button后，只会弹出一个弹窗，显示button。

注意现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。

第二部分事件捕获

事件捕获和事件冒泡是刚好相反的，事件捕获是指不太具体的节点应该更早的接收到事件，而最具体的节点应该接收到事件。举例如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bubble</title>
  <style>
    button{
      background: red;
      color:white;
    }
    #third{
      width: 50px;
      height: 50px;
      border:thin solid red;
    }
    #second{
      width: 100px;
      height: 100px;
      border:thin solid red;
    }
    #first{
      width:200px;
      height: 200px;
      border:thin solid red;
    }
  </style>
</head>
<body>
  <div id="first">
    <div id="second" >
      <div id="third" >
        <button id="button">事件冒泡</button>
      </div>
    </div>
  </div>
  <script>

    document.getElementById("button").addEventListener("click",function(){
      alert("button");
    },true);

    document.getElementById("third").addEventListener("click",function(){
      alert("third");
    },true);

    document.getElementById("second").addEventListener("click",function(){
      alert("second");
    },true);    

    document.getElementById("first").addEventListener("click",function(){
      alert("first");
    },true);

  </script>
</body>
</html>

大家可以看到这个例子我只是把addEventListener()方法的第三个参数由前面例子的false修改为了true,也就是使用捕获方式获得button，那么结果如下

我们可以看到最外层的事件先被触发，才是我们点击的button事件被触发，这便是事件捕获。

那么我们如何才能阻止事件的捕获呢？使用event.sPropagation()方法吗？答案是否定的，这里要知道，sPropagation()方法只能阻止事件的冒泡，而不能阻止事件捕获。

我们可以使用DOM3级新增事件sImmediatePropagation()方法来阻止事件捕获，此方法还可以阻止事件冒泡。应用如下

document.getElementById("second").addEventListener("click",function(){

  alert("second");

  event.sImmediatePropagation();

},true);

这样，就可以在id为second处阻止事件的捕获了。

 注意尽管这是Netscape Navigator提出的事件流，现在所有的浏览器都支持这种事件流模型。由于老的浏览器不支持，所以很少有人使用事件捕获。

第三部分DOM事件流

DOM2级事件规定的时间流包括 三个阶段

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

注意在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：浅析js的模块化编写 require.js 下一篇：纯JS焦点图特效实例(可一个页面多用)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by