一.事件流
1.事件流的介绍:
事件流描述的是从页面中接收事件的顺序.
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.
2.事件流包括两种模式:冒泡和捕获.
(1)事件冒泡:是指子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发,父级元素后触发.
(2)事件捕获:与事件冒泡相反,父级元素先触发,子集元素后触发.
例:
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
div1.style.width=200+'px';
div1.style.height=200+'px';
div1.style.border='1px solid red';
div2.style.width=100+'px';
div2.style.height=100+'px';
div2.style.border='1px solid yellow';
div1.onclick=function(){
div1.style.background='aqua';
}
div2.onclick=function(){
div2.style.background='darkorchid';
}
}
</script>
...............
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>