之前我们指定事件处理程序时,将回调函数赋给一个对象属性。例如,
window.onload=...
;btn.onclick=...
这种指定事件处理程序的方式很方便,但有时需要更通用的事件处理程序指定方式
例如,如果要给一个事件指定多个处理程序,就必须使用方法addEventListener
addEventListener
方法
对window
对象调用addEventListener
方法,注册一个加载事件处理程序
window.addEventListener("load", init, false) ;
function init(){
//网页加载完毕后的事件处理程序
}
向它传递了三个参数:
-
"load"
表示事件名称 -
init
是指向事件处理程序的引用 -
false
标志,决定是否要让事件向上传递(这将在稍后解释)
可多次调用addEventListener,指定更多事件处理程序:
- 在你想将代码分开放在多个函数中时,这提供了极大的方便
- 但无法知道先调用哪个处理程序,因此设计代码时务必考虑这一点
另外,可以搭配window.onload=...
的同时使用addEventListener
,这不会有任何问题
window.onload = function(){//指定加载事件处理程序
var div = document.getElementById("clickme");
div.addEventListener("click", handleClick, false);
//为<div>指定单击事件处理程序
};
function handleClick(eventObj) (
...
}
ps. IE8和更早的版本中:
- 使用
attachEvent
,而非addEventListener
- 事件触发导致事件处理程序被调用时,事件对象存储在
window.event
中,而不会被传递给事件处理程序- 触发事件的元素将被存储在事件对象的
srcElement
属性中(即window.event.srcElement
),而非eventObj.target
addEventListener
的第三个参数true/false
addEventListener
的第三个实参指定是否将事件向上传递给父元素
- 就加载事件而言,这无关紧要,因为对象window位于最顶层;
- 但如果你在
<div>
元素中嵌套了一个<span>
元素,并希望用户单击<span>
元素时<div>
元素也将收到这个事件,就可将这个实参设置为true
(而不是false
)
removeEventListener
方法
对于使用addEventListener
添加的事件处理程序,还可使removeEventListener
来删除它
下面利用removeEventListener
方法,使得事件处理程序只会被触发一次
window.onload = function(){//指定加载事件处理程序
var div = document.getElementById("clickme");
div.addEventListener("click", handleClick, false);
//为<div>指定单击事件处理程序
};
function handleClick(eventObj) (
var target = eventObj.target;
alert("You clicked on "+ target.id);
target.removeEventListener("click", handleClick,false);
//单击<div>元素后删除事件处理程序(从而该事件处理程序只会被触发一次)
}