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

最新推荐文章于 2024-06-10 17:00:16 发布

wwp+

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量131

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/csdn_wwp/article/details/126664065

版权

<!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>

添加事件监听函数的方式

wwp+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件流和事件代理（事件委托）

js 事件流和事件代理
复制链接

扫一扫