JavaScript事件传播控制

黄良钵

分类: 程序开发 796 0

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>事件传播控制</title>
  8.         <style>
  9.             div{
  10.                 width: 300px;
  11.                 height: 50px;
  12.                 background-color: red;
  13.                 color: white;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <section>
  19.             <div>
  20.                 <a href="https://www.baidu.com">这个可以点击</a>
  21.             </div>
  22.         </section>
  23.         <script>
  24.             var div =document.querySelector('div')
  25.             var sec =document.querySelector('section')
  26.             document.documentElement.addEventListener('click',function(){alert('HTML-挖洞')},true)
  27.             document.documentElement.addEventListener('click',function(){alert('HTML-冒泡')},false)
  28.             document.body.addEventListener('click',function(){alert('body-挖洞')},true)
  29.             document.body.addEventListener('click',function(){alert('body-冒泡')},false)
  30.             sec.addEventListener('click',function(e){
  31.                 alert('section-挖洞')
  32.                 // e.stopPropagation()
  33.                 // 停止事件传播 即会停止挖洞过程也可以停止冒泡
  34.                 // 不会影响同级别的事件监听者
  35.                 // e.stopImmediatePropagation()
  36.                 // 停止同级别的多个事件监听者的调用
  37.                 // 不管用哪个方法都会停止挖洞或冒泡 但都不会影响超链接跳转
  38.                 // 超链接跳转是整个事件传播完成之后才进行跳转的
  39.                 e.preventDefault()
  40.                 // 阻止事件的默认行为 如 超链接跳转 或 表单提交 时
  41.                 // 使用e.defaultPrevented 可以获取事件的默认行为是否已经被阻止
  42.             },true)
  43.             sec.addEventListener('click',function(e){
  44.                 alert('section-挖洞2')
  45.                 // e.stopPropagation()
  46.             },true)
  47.             sec.addEventListener('click',function(e){
  48.                 alert('section-冒泡')
  49.                 // e.stopPropagation()      
  50.                 // alert(e.defaultPrevented) //true 
  51.                 e.defaultPrevented =false
  52.                 // 不能将已阻止的默认行为恢复
  53.                 },false)
  54.             div.addEventListener('click',function(){alert('div-挖洞')},true)
  55.             div.addEventListener('click',function(){alert('div-冒泡')},false)
  56.             // 第三个参数为true的时候 监听者调用比较早 设置false是比较晚
  57.             // 如果不传第三个参数 监听者调用事件比较晚 会在冒泡阶段调用
  58.             sec.onclick =function(){
  59.                 alert('哪个阶段调用')
  60.             }
  61.             // 在冒泡阶段调用
  62.         </script>
  63.     </body>
  64. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、事件

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript事件传播控制”

Loading...