事件流–当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件,事件的传播顺序,叫做事件流

一、事件流的分类

A、冒泡型事件

由明确的事件源到不确定的事件源,依次向上触发

例:

点击依次弹出:我是li1,我是ul,我是div,我是body;

B、捕获型事件

不确定的事件源,到明确的事件源,依次向下触发

addEventListener(事件,处理函数,false);

addEventListener(事件,处理函数,true);

例:

HTML:

<div id="outdiv">

<div id="innerdiv">

</div>

</div>

CSS:

#outdiv{

width: 300px;

height: 300px;

border:1px solid red;

}

#innerdiv{

width: 200px;

height: 200px;

border:1px solid blue;

margin: 50px auto;

}

Script:

点击innerdiv依次弹出:outdiv,innerdiv;

二、阻止事件流

IE:事件对象.cancelBubble=true;

FF: 事件对象.stopPropagation();

例:

将上一个例子的Script代码改为

点击innerdiv时只弹出innerdiv,阻止事件流;

三、目标事件源对象

IE:事件对象.srcElement

FF:事件对象.target

例:

点击数字1的时候,只弹出1;

相关推荐