js事件流及事件冒泡

事件流

事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。

事件冒泡,是从里往外逐个触发。事件捕获,是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。

 

 

 

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');

};

在阻止冒泡的过程中,W3CIE采用的不同的方法,那么我们必须做一下兼容。

function stopPro(evt) {

var e = evt || window.event;

window.event ? e.cancelBubble = true : e.stopPropagation();

}

原文地址:https://www.cnblogs.com/httandytt/p/5935931.html