JavaScript学习笔记——addEventListener:通用的事件处理程序指定方式

之前我们指定事件处理程序时,将回调函数赋给一个对象属性。例如,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>元素后删除事件处理程序(从而该事件处理程序只会被触发一次)
}
上一篇:事件处理程序


下一篇:JavaScript - DOM事件的优化