JavaScript事件监听之事件流(捕获阶段实现 + 阻止事件流传播 + 阻止元素默认行为、mouse鼠标事件、事件委托)

最新推荐文章于 2024-08-15 19:36:37 发布

原创

最新推荐文章于 2024-08-15 19:36:37 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#事件监听之事件流 #阻止事件流传播 #阻止元素默认行为 #mouse鼠标事件 #事件委托

1. 捕获阶段实现 + 阻止事件流传播 + 阻止元素默认行为

默认只在冒泡阶段触发事件。可以选择不在冒泡阶段触发事件，而在捕获阶段触发事件。语法: 元素对象.addEventListener('事件类型', 要执行的函数, 是否在捕获阶段触发事件)，是否在捕获阶段触发事件默认为false。L0旧版事件监听只有冒泡，没有监听

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  <title>Title</title>

  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>

</head>
<body>

  <div class="father">
    <div class="son"></div>
  </div>

  <script>

      document.addEventListener('click', function (e) {
        alert('我是爷爷')
        
        // e.stopPropagation