js--事件--事件流--事件冒泡、阻止事件冒泡

最新推荐文章于 2024-09-30 15:23:15 发布

米卡小米

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量270

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/cmy741741/article/details/121222192

版权

事件冒泡事件传播阻止冒泡 DOM事件 JavaScript

关键词由CSDN通过智能技术生成

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

l 事件冒泡 (IE事件流)

事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点

<html>

<head></head>

<body>

<div>click me</div>

</body>

</html>

当点击了 <div> 元素，这个 click 事件会按照如下顺序传播

div->body->html->document

Ø注意：IE8以及更早版本只支持事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡</title>
  <style>
    #outer {
      width: 300px;
      height: 300px;
      background-color: cornflowerblue;
    }
    #center {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin: 0 auto;
    }
    #inner {
      width: 100px;
      height: 100px;
      background-color: palevioletred;
      margin: 0 auto;
    }
  </style>
  <script>
    window.onload = function() {
      // 1.获取绑定事件的dom节点
      var outer = document.getElementById('outer')
      var center = document.getElementById('center')
      var inner = document.getElementById('inner')
      // 2.给目标节点绑定点击事件
      var myfun = function(event) {
        console.log(this);
        console.log(event.target);
        console.log(event.currentTarget);
        console.log('-------------');
      }
      outer.onclick = myfun;
      center.onclick = myfun;
      inner.onclick = myfun;
    }
  </script>
</head>
<body>
  <div id="outer">
    outer
    <div id="center">
      center
      <div id="inner">
        inner
      </div>
    </div>
  </div>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡</title>
  <style>
    #outer {
      width: 300px;
      height: 300px;
      background-color: cornflowerblue;
    }
    #center {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin: 0 auto;
    }
    #inner {
      width: 100px;
      height: 100px;
      background-color: palevioletred;
      margin: 0 auto;
    }
  </style>
  <script>
    window.onload = function() {
      // 1.获取绑定事件的dom节点
      var outer = document.getElementById('outer')
      var center = document.getElementById('center')
      var inner = document.getElementById('inner')
      // 2.给目标节点绑定点击事件
      var num = 0
      outer.onclick = function(event) {
        num = 3
        // 阻止事件冒泡
        event.stopPropagation();
        console.log(num);
      }
      center.onclick = function(event) {
        num = 2
        // 阻止事件冒泡
        event.stopPropagation();
        console.log(num);
      }
      inner.onclick = function(event) {
        num = 1
        // 阻止事件冒泡
        event.stopPropagation();
        console.log(num);
      }
      
    }
  </script>
</head>
<body>
  <div id="outer">
    outer
    <div id="center">
      center
      <div id="inner">
        inner
      </div>
    </div>
  </div>
</body>
</html>