DOM模型 - 事件流（冒泡/捕获） - 《JavaScript》

事件冒泡
事件捕获

事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

事件冒泡

IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（从具体到不具体）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="bodyClick()">
    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">点击冒泡</p>
        </button>
    </div>
    <script>
        function p(){
            console.log('p标签被点击')
        }
        function btn(){
            console.log("button被点击")
        }
        function divClick(event){
            console.log('div被点击');
        }
        function bodyClick(){
            console.log('body被点击')
        }
    </script>
</body>
</html>

事件捕获

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件（从不具体到具体）

⚠️注意：事件捕获只采用DOM2级事件处理程序
事件捕获：DOM2级事件处理。addEventListener(“type” , callback , boolean)
boolean：

true：事件捕获

false：默认值是false，代表事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <button>
      <p>点击捕获</p>
  </button>
</div>
<script>
  var oP=document.querySelector('p');
  var oB=document.querySelector('button');
  var oD=document.querySelector('div');
  var oBody=document.querySelector('body');
  oP.addEventListener('click',function(){
      console.log('p标签被点击')
  },true);
  oB.addEventListener('click',function(){
      console.log("button被点击")
  },true);
  oD.addEventListener('click',  function(){
      console.log('div被点击')
  },true);
  oBody.addEventListener('click',function(){
      console.log('body被点击')
  },true);
</script>
</body>
</html>