js 事件流和事件代理（事件委托）

最新推荐文章于 2024-12-24 20:09:58 发布

原创最新推荐文章于 2024-12-24 20:09:58 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文探讨了JavaScript中的事件流概念，包括事件捕获、处于目标和冒泡阶段，并通过示例展示了如何使用事件委托来优化代码。同时，提到了阻止默认事件和冒泡的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id = 't1'>
  <div id = 't2'>
    <input type="button" value="开始冒泡" id = 't3'/>
    <input type="button" value="开始冒泡" id = 't9'/>
  </div>
</div>
</body>
</html>
<script>

  /*
   * js事件流，参考js基础DOM事件ppt
   * 三个阶段 ：事件捕获，处于目标，冒泡阶段
   */

  let target1 = document.getElementById('t1')
  target1.addEventListener('click', function(e) {
    console.log('t1',e.target,e.currentTarget,e.eventPhase,e.type)
  })

  let target2 = document.getElementById('t2')
  target2.addEventListener('click', function(e) {
    console.log('t2',e.target,e.currentTarget,e.eventPhase,e.type)
  })

  let target3 = document.getElementById('t3')
  target3.addEventListener('click', function(e) {
    console.log('t3',e.target,e.currentTarget,e.eventPhase,e.type)
  })


  /*
   * js事件委托：利用冒泡原理，将子元素触发的事件绑定在父元素上
   */

  let targetAgency = document.getElementById('t1')
  targetAgency.addEventListener('click', function(e) {
    // console.log('t1',e.target,e.currentTarget,e.eventPhase,e.type)
    console.log('事件委托到t1处理')
    let target = e.target;
    if(target.id === 't3'){
      console.log('t3')
    }
    if(target.id === 't9'){
      console.log('t9')
    }
  })


  /*
   * 阻止默认事件：e.preventDefault();
   * 阻止冒泡：e.stopPropagation()
   * return false; 上述两种都阻止，同时还可用于返回需要的值
   */

</script>

添加事件监听函数的方式