事件,就是document或者window中发生的一些特定的交互瞬间,定义与JavaScript和HTML之间。
事件流
DOM2级事件规定事件流包含3个阶段:事件捕获(Capture)、处于目标(Target)、事件冒泡(Bubbling)。
none
如上图中,事件捕获阶段,将沿着DOM树向下传运事件,直至目标节点。( document > html > body > p )
处于目标阶段,找到事件监听器后,作用于目标节点。
冒泡阶段,事件沿DOM树传回document。
事件处理程序
- DOM0级事件处理程序:
即通过JavaScript指定事件处理程序的传统方式,将一个函数赋值给一个事件处理程序属性。
var btn = document.getElementById("mybtn");
btn.onclick = function(){
alert('brbrbr");
};
btn.onclick = null; //删除
DOM0级方法是元素的方法,此时的事件处理程序是在元素的作用域中运行,换句话说程序中的this(假如有this)会绑定于当前函数。
- DOM2级事件处理程序:
用于指定和删除处理程序的方法:addEventListener()和removeEventListener(),所以DOM节点都包含这两种方法,addEventListener("EventName", function(), Boolean)
,如果最后这个布尔值为True,表示在捕获阶段调用事件处理程序,如False,表示在冒泡阶段调用事件处理程序(处于目标阶段一般被看作为冒泡阶段的一部分)。
var btn = document.getElementById("mybtn");
btn.addEventListener("click", function(){
alert("brbrbrbr");
}, false);
通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移出,但由于上述代码中使用了匿名函数,故无法移出,因此,添加事件处理程序时因尽量避免。大多数情况下,为最大限度的兼容浏览器,boolean取false。
IE中attachEvent()和detachEvent()类似,但需要注意的是,其中的this会绑定全局,即window,意味着事件处理程序会在全局作用域下运行。
事件对象
在触发DOM上的事件时,会产生一个事件对象(event),这个对象中包含了所以与事件有关的信息。
btn.onclick = function(event){
...
};
btn.addEventListener("click", function(event){...}, false);
网友评论