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

本文主要是介绍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学习笔记——addEventListener：通用的事件处理程序指定方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！