javascript 事件冒泡实例讲解

子元素触发的事件，会往上（父元素）传递；

例子：

<div id="box">
        <p></p>
</div>
< >
            var oP = document.querySelector('#box p');
            var oBox = document.querySelector('#box');
　　　　　　　　
            oBox.  = function () {
                alert('123');
            }
</ >
当我点击div中的p标签时，也会触发 ，这是为什么？
因为事件会一直往上传递，p -> div（触发）->body ->document

冒泡事件是默认事件，但有些情况，冒泡事件是一种麻烦的事情。如：

<div id="box">
            <p class="detail">
                我是detail！
            </p>
</div>
//我的目的本来是，点击div弹出p标签，点击document时隐藏p标签。
var oBox =document.querySelector('#box');
            var oP = oBox.children[0];
            
            //我点击oBox时弹出p标签
            oBox.  = function () {
                oP.style.display = 'block';
            };
           //但随着冒泡的传递，到了document时，也会触发document标签的点击事件，然后p标签刚出现的瞬间又隐藏了
            document.  = function () {
                oP.style.display = 'none';
                oP.style.display = 'none';
};

这时候需要把默认事件去掉

cancelBubble = false 或者 stopPropagation();

//上述的oBox的点击事件改成
oBox.  = function (e) {
                oP.style.display = 'block';
                e = e||window.event;
                e.cancelBubble = true;
                或者 e.stopPropagation();
            };
另外：

e.cancelBubble = true;是兼容所有浏览器的
e.stopPropagation() 不兼容IE8以下，所以一般都推荐第一种