您的位置:首页 > Web前端 > JavaScript

JavaScript冒泡事件和stopPropagation方法

2016-10-13 18:00 148 查看

当一个元素上的事件被触发的时候,比如说鼠标点击了一个Button,同样的事件将会在那个元素的所有祖先元素中被触发。

这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

js:
</p><p><pre class="javascript" name="code"><script type="text/javascript">
var Bodyclick = function(){
alert("冒泡了!!!");
}
window.onload = function(){
var body = document.body;
body.addEventListener('click',Bodyclick,false);//冒泡阶段
//停止事件冒泡
document.getElementById("stopBubble").addEventListener("click",
function(event){
alert("我是stopBubble_btn上事件");
event.stopPropagation();
},false);

//正常事件冒泡
document.getElementById("bubble").addEventListener("click",
function(){
alert("我是bubble_btn上事件");
},false);
};
</script>
html:
<button id="stopBubble">阻止冒泡</button>
<button id="bubble">冒泡</button>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息