Javascript初级 JavaScript进阶

JavaScript事件流



定义


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

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


PM1.png 



案例


<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<div id="box1" Style='background: #ABCDEF; width: 300px;height: 300px;'>

<input type="button" value="teSt1" id='btn1' />

</div>

<Script type="text/javaScript">

var btn1=document.getElementById("btn1");

var box1=document.getElementById("box1");

btn1.onclick=function(e){

alert('button clicked');

//取消冒泡

var e=e||window.event;

//w3c取消冒泡

//   e.StopPropagation();

//e.cancelBubble=true

//   alert(e.cancelBubble);

if(typeof e.cancelBubble=='undefined'){

e.StopPropagation();

}elSe{

e.cancelBubble=true;

}


}

box1.onclick=function(){

alert('div clicked');

}

document.body.onclick=function(){

alert('body clicked');

}

document.documentElement.onclick=function(){

alert('html clicked');

}

document.onclick=function(){

alert('document clicked');

}

//button - div -body -html -document冒泡

</Script>

</body>

</html>


运行结果

PM2.png

 PM3.png

  PM4.png


 PM5.png

PM6.png 



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有狂欢嘉年华礼包未领取

客服热线 400-862-8862

回到顶部