1.捕获和冒泡
(1)冒泡就是从下往上,也就是DOM元素被触法事件时(此时的dom元素为目标元素),目标元素事件执行后,它的祖先元素所绑定的事件会向上顺序执行。
(2)捕获正相反。
(3)所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
<div id='one'>
<div id='two'>
<div id='three'>
<div id='four'>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
one.addEventListener('click',function(){
alert('1');
},false);
two.addEventListener('click',function(){
alert('2');
},false);
three.addEventListener('click',function(){
alert('3');
},false);
four.addEventListener('click',function(){
alert('4');
},false);
</script>
<div id='one' onclick="alert('1')">11111
<div id='two' onclick="alert('2')">22222
<div id='three' onclick="alert('3')">3333
<div id='four' onclick="alert('4')">4444
</div>
</div>
</div>
</div>
两段代码执行结果均为:
点击one元素,输出1;
点击two元素,输出2 1;
点击three元素,输出 3 2 1;
点击four元素,输出 4 3 2 1;
2.阻止冒泡
e.stopPropagation();
<html>
<div id='one'>11111
<div id='two'>22222
<div id='three'>3333
<div id='four'>44444
</div>
</div>
</div>
</div>
<script type='text/javascript'>
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
one.addEventListener('click',function(e){
alert('one');
e.stopPropagation();
},false);
two.addEventListener('click',function(e){
alert('two');
e.stopPropagation();
},false);
three.addEventListener('click',function(e){
alert('three');
e.stopPropagation();
},false);
four.addEventListener('click',function(e){
alert('four');
e.stopPropagation();
},false);
</script>
</html>
在ie中
e=window.event;
e.cancleBubble=true;
代码执行结果为:
点击one元素,输出 1;
点击two元素,输出 2 ;
点击three元素,输出 3;
点击four元素,输出 4;
3.一个DOM元素绑定多个事件的执行过程
执行次数:绑定了几个事件便执行几次。
4.target
<script type="text/javascript">
function getEventTrigger(event)
{
x=event.target;
alert("The id of the triggered element: " + x.id);
}
</script>
</head>
<body >
<p id="p1" onmousedown="getEventTrigger(event)">
Click and alert box will show which element triggered the event.</p>
代码执行结果为:The id of the triggered element: p1