图集1/8

正文 1307字数 327,101阅读

1.什么是事件冒泡?
  事件冒泡就是从具体到不具体,
  例如:当你给了一个button按钮一个点击事件,再给他的父级相同的事件,就会按照,button,body,document,window,继续向上冒泡。

2。什么是事件捕获?
  从不具体到具体,跟事件冒泡刚好相反。window document body button 。
  例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; } </style> <script> window.onload = function () { var oBtn = document.getElementById('btn'); oBtn.setCapture(); oBtn.onclick = function(){ alert('1'); } } </script> </head> <body> <input type="button" value="按钮" id="btn"> </body> </html>
Run code
Cut to clipboard

    3.Dom事件流包括三个阶段:
      1.>事件捕获阶段
      2.>处于目标阶段
      3.>事件冒泡阶段

    4.事件捕获阶段
    window.addEventListener('click',function(){ // },true)
    Run code
    Cut to clipboard

      为true代表事件使用事件捕获模式,false则代表使用事件冒泡

      5.阻止事件冒泡
      stopPropagation()
      Run code
      Cut to clipboard