Skip to main content

事件

捕获事件​

<body>
    <script>
        window.onload = function(){
            let grandFather = document.querySelector('.grand-father');
            grandFather.addEventListener('click',(event)=>{
                console.log('father:',event,event.target);
            },false)
            let child = document.querySelector('.child');
            child.addEventListener('click',(event)=>{
                event.preventDefault();
                console.log('child:',event,event.target);
                // event.stopPropagation();
            },false)
        }
    </script>
    <div class="grand-father">
        <div class="father">
            <a class="child" href="www.baidu.com"></a>
        </div>
    </div>
</body>

冒泡事件​

<body>
  <div id="s1" onclick='alert("div");'>
    test1
    <ul id="s2" onclick='alert("ul");'>
      test2
      <li id="s3" onclick='alert("li");'>test3</li>
    </ul>
  </div>
  <script>
    s1.addEventListener(
      "click",
      function (e) {
        e.stopPropagation();
        console.log("s1 冒泡事件 冒泡");
      },
      true
    );
    s2.addEventListener(
      "click",
      function (e) {
        console.log("s2 冒泡事件 冒泡");
      },
      false
    );
    s3.addEventListener(
      "click",
      function (e) {
        console.log("s3 冒泡事件 冒泡");
      },
      false
    );
  </script>
</body>