之所以会想到这个话题,是因为在回忆本身之前写的为 button 动态绑定事宜的函数时,脑海里遽然显现出了一个题目:addEventListener
要领,与 onclick=""
比拟,各有哪些长处和瑕玷呢?因而用关键字“StackOverflow addEventListener click func false”举行搜刮,第二个结果就是上面的文章链接,现将全文择要以下:
绑定事宜有几种体式格局:
Event Listeners
(addEventListener
以及 IE 的 attachEvent
)
IE 8 以及更低版本的 IE 中,需要用 attachEvent 要领:
element.attachEvent('onclick', function() { /* do stuff here*/ });
关于 IE 9 和更高版本的 IE,以及别的浏览器,则要用 addEventListener 要领:
element.addEventListener('click', function() { /* do stuff here*/ }, false);
用上面这类要领(DOM level 2 events),理论上可认为一个元素绑定无数个事宜,现实运用中则决定于客户端的电脑内存以及浏览器。
上面的例子运用了匿名函数这个特征,还能够运用组织函数或许闭包来增加事宜监听器:
var myFunctionReference = function() { /* do stuff here*/ }
element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);
另一个主要特征,则是上面这段代码中末了一行的末了一个参数,用来掌握监听器关于冒泡事宜的相应。95%的运用场景中,这个参数都为 false
,attachEvent
以及内联事宜则都没有能够完成雷同功用的这个参数。
Inline Events 内联事宜
(HTML 的 onclick=""
属性,以及 element.onclick
)
在一切支撑 JavaScript 的浏览器中,能够用下面的体式格局来增加内联的事宜监听器。
<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>
虽然许多有履历的开发人员对这类体式格局嗤之以鼻,然则它确实充足的简朴粗犷。在这里你不能运用闭包或许匿名函数,而且掌握域也是有限的。
另有另一种要领:
element.onclick = function () { /*do stuff here */ };
这个要领能完成雷同的结果,而且有更多的掌握域(因为是 JS 剧本,而不是 HTML 代码),固然了,也能运用匿名函数、组织函数、闭包。
内联事宜一个显著的不足:因为内联事宜是作为元素属性保存起来的,这些属性能够被掩盖,所以假如为同一个事宜绑定了多个处置惩罚顺序,那末末了一个处置惩罚顺序会掩盖之前的顺序(多谢 @谦龙 指出此处的翻译毛病)。
var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };
运转上面的示例,将只会看到“did stuff #2”——第二行代码掩盖了默许的内联 onclick
属性,第三行代码又将第二行代码掩盖了,所以会发生如许的结果。
谁是最好计划?
要回答这个题目,就要斟酌各个浏览器的兼容性,以及现实需求了。纵然如今只需要为一个元素绑定一个事宜,然则今后极可能还要同时再绑定别的事宜,这个时刻,就需要用 attachEvent
和 addEventListener
了,否则用内联要领就能够搞定了。
jQuery 以及别的的 JavaScript 框架,已将各个浏览器的 DOM level 2 events
的完成以通用模子的情势封装起来了,所以经由过程 jQuery 能够很方便地写出适用于一切浏览器的代码:
$(element).on('click', function () { /* do stuff */ });
在解决题目的时刻,不要简朴地避实就虚,比方这篇文章议论的就是怎样增加事宜监听器,那就无妨写一个适用于一切浏览器的要领:
function addEvent(element, evnt, funct){
// if else 构造可用三元运算符 ? : 来精简
// 这里之所以要如许写,是便于读者明白
if (element.attachEvent) // IE 8 及更低版本浏览器
return element.attachEvent('on'+evnt, funct);
else // IE 8 及以上,或别的浏览器
return element.addEventListener(evnt, funct, false);
}
// 挪用示例
addEvent(
document.getElementById('myElement'),
'click',
function () { alert('hi!'); }
);