master

分支 (2)

管理

管理

master

Devlop

java-script-notes
/
113.冒泡.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #box1 {
          width: 200px;
          height: 200px;
          background-color: #cd5b5b;
      }

      #s1 {
          background-color: yellow;
      }
  </style>

  <script>
    window.onload = function () {
      /*
				 * 事件的冒泡（Bubble）
				 * 	- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
				 * 	- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
				 *
			*/

      //为s1绑定一个单击响应函数
      let s1 = document.getElementById("s1");
      s1.onclick = function (event) {
        alert("我是span的单击响应函数");
        event = event || Event;
        //取消冒泡
        //可以将事件对象的cancelBubble设置为true，即可取消冒泡
        event.cancelBubble = true;
      };

      //为box1绑定一个单击响应函数
      let box1 = document.getElementById("box1");
      box1.onclick = function () {
        alert("我是div的单击响应函数");
      };

      //为body绑定一个单击响应函数
      document.body.onclick = function () {
        alert("我是body的单击响应函数");
      };

    };
  </script>
</head>
<body>
<div id="box1">我是一个div
  <span id="s1">
    我是一个span
  </span>
</div>
</body>
</html>