DOM事件流

事件

1:事件流

事件流描述的是从页面中接收事件的顺序。IE是事件冒泡( 从下往上一层一层的往上传)，其他的为事件捕获(从docunment 一层一层的往下捕获).

事件处理程序,onclick,onload,onmouseover,每个都会创建一个封装元素属性值的函数，函数中有一个局部变量event ，为事件对象.

DOM0级对事件的处理

一:简单 二:具有跨浏览器的优势。 btn.onclick = function(){}; 被认为是该元素的方法,可以用方法中用this操作元素, 取消 btn.onclick=null

缺点,后面定义的onclick() 会把前面的覆盖

DOM2级事件处理程序

addEventListener(),removeEventListener() ,接收三个参数,1:要处理的事件名,2:作为事件处理程序的函数3: 布尔值.(true 为表示事件在捕获阶段调用事件处理程序,false 为在事件冒泡阶段调用事件处理程序)

好处:可以添加多个事件处理程序,触发顺序按照添加的顺序触发.

通过addEventListen()添加的事件处理程序只能用removeEventListener() 移除,移除时传入的参数必须和处理传入的参数必须一致.这就意味着通过addEventListener() 添加的匿名函数将无法移除.必须要

var btn = document.getElementById("myBtn");
var handle = function(){alert(this.id)};
btn.addEventListener("click",handle,false);
//移除  和添加方法的参数一样
btn.removeEventListener("click",handle,false)

IE事件处理程序

IE实现了和DOM 类似的两个方法,attachEvent() 和 detachEvent() ，这两个方法只接受两个相同的参数,事件处理程序名称和事件处理函数.由于IE8只支持事件冒泡,通过attachEvent 添加的事件只会添加到冒泡阶段。注意添加的是onclick 不是上面的click.当调用detachEvent() 时，必须像removeEventListener() 一样传入的参数一样，意味着匿名函数不能被移除。添加多个方法的时候,执行顺序按添加相反的顺序触发

var btn =document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
 alert(this === window); //true
})

事件对象

在触发DOM 事件时,都会产生一个event

阻止特定事件的默认行为.用preventDefault(). 例如阻止<a></a> 的跳转。

var link=document.getElemetById("myLink");

link.onclick=function(event){event.preventDefault()} //只有cancelable属性为true的才能用preventDefault 也可以 return false; 来阻止

event.stopPropagation() 用于立即停止事件在DOM 层次中的传播,取消进一步的事件捕获或捕获.从而避免触发不相干的的事件绑定.注意cancelBubble 属性 也可以阻止事件捕获.IE为事件冒泡.event.stopPropagation() 都可以阻止。

总的来说event.preventDefault();event.stopPropagation() 来阻止。