JS事件冒泡机制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wangqingbo0829/article/details/46290841

由表及里，对象逐层响应【冒泡】——JS总结

HTML文本：

  <html>
  <head>
     //JS、CSS的引用（略）	
  </head>
  <body>	
      <div id="box">
          <input type="button" name="btn" value="提交" />
      </div>	
  <body/>
  </html>

从上层到最底层，对象逐层响应【冒泡】

window.onload = function () {
    document.onclick = function () {
        alert('第五层，也即最底层——document');
    };

    document.documentElement.onclick = function () {
        alert('第四层，也即倒数第二层——html');
    };

    document.body.onclick = function () {
        alert('第三层——body');
    };

    document.getElementById('box').onclick = function () {
        alert('第二层——div');
    };

    document.getElementsByTagName('input')[0].onclick = function () {
        alert('第一层，也即最表层——input');
    };

    //停止冒泡，(示例：在input层阻止冒泡)
    //document.getElementsByTagName('input')[0].onclick = function (evt) {
        //alert('最表层——input');
        //var e = evt || window.event;
        //取消冒泡
        //方法(1)	e.stopPropagation();	//W3C取消冒泡
        //方法(2)       e.cancelBubble = true;	//IE取消冒泡
    //};

}

如上程序，未注释部分的代码，运行结果会弹5次框，因为其逐层响应事件的触发。
对于标签的逐层响应事件，不需要用的时候，需要将其阻止。