Javascript—事件对象(2)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
      <p>
          <div id="d1">
              <button id="btn1">点我</button>
          </div>
      </p>
      <script>
          document.getElementById("btn1").addEventListener("click",showType);
          function showType(btn1) {
              alert(btn1.type);
          // 调用type属性,返回事件的类型
          }
      </script>
     
      <p>
          <div id="d2">
              <button id="btn2">点我</button>
          </div>
      </p>
      <script>
          document.getElementById("btn2").addEventListener("click",showTarget);
          document.getElementById("d2").addEventListener("click",text);
          function showTarget(btn2) {
              alert(btn2.target);
          // 调用type属性,返回事件的类型
              btn2.stopPropagation();
          //阻止事件冒泡,也就是包含此事件对象的父类事件不再执行
          //阻止事件的默认行为,用法同上,阻止a标签跳转网页等行为
          }
          function text(btn2) {
              alert("事件冒泡")
          }
      </script>
</body>
</html>

没有去除事件冒泡效果:

去除事件冒泡之后:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/81778593