事件流:DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程的顺序可称为DOM事件流。
工具/原料
1
电脑
2
浏览器
方法/步骤
1
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确的对象(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
2
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法addEventListener(event,fn,useCapture)//支持w3c即用的DOM事件流 ,先事件捕获,再事件冒泡。 useCapture参数是一个boolean值 true代表在事件处理函数捕获时执行,false代表在冒泡时执行
div
以下为支持w3c的浏览器 比如chrome firfox等oUl.addEventListener('click',function (){ alert('ul'); },true); oLi.addEventListener('click',function (){ alert('li'); },true); oA.addEventListener('click',function (){ alert('a'); },true);//以上事件的执行顺序是ul>li>a 采用捕获/*oDiv.onclick=function (){ alert('div'); } oLi.onclick=function (){ alert('li'); } oA.onclick=function (){ alert('a'); }*//这种方式默认为采用冒泡 a>li>divoUl.addEventListener('click',function (){ alert('ul'); },false); oLi.addEventListener('click',function (){ alert('li'); },false); oA.addEventListener('click',function (){ alert('a'); },false);//这种方式都是采用冒泡 a>li>div关于IE7,8不支持w3c的 采用ele.attachEvent("onclick", doSomething2);统一采用冒泡类型jQuery中为了兼容统一采用冒泡- ul
- li a
3
总之一点: 基本上不去专门addEventListener的第三个参数设置为false,都是只考虑冒泡的。关于阻止冒泡 在W3c中,使用eve.stopPropagation()方法//eve事件对象在IE下设置eve.cancelBubble = true;
注意事项
1
无
2
无