addEventListener和onclick有什么区别?
var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
上面的代码一起驻留在一个单独的.js文件中,它们都可以完美地工作。
addEventListener和onclick有什么区别?
var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
上面的代码一起驻留在一个单独的.js文件中,它们都可以完美地工作。
当前回答
Javascript倾向于把所有东西都混合到对象中,这可能会让人困惑。这就是JavaScript的方式。
本质上,onclick是一个HTML属性。相反,addEventListener是DOM对象上表示HTML元素的方法。
在JavaScript对象中,方法只是一个属性,它有一个函数作为值,并且对它所附加的对象起作用(例如使用这个)。
在JavaScript中,DOM表示的HTML元素将其属性映射到其属性上。
这就是人们感到困惑的地方,因为JavaScript将所有东西都融合到一个单独的容器或名称空间中,没有任何间接层。
在一个正常的OO布局中(它至少合并了属性/方法的命名空间),你可能会有这样的东西:
domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))
有一些变化,比如它可以为onload使用getter/setter,或者为属性使用HashMap,但最终这就是它的外观。JavaScript消除了这一间接层,期望知道什么是什么。它将domElement和属性合并在一起。
为了限制兼容性,最好使用addEventListener。由于其他答案谈论的是这方面的差异,而不是基本的方案差异,我将放弃它。本质上,在理想的情况下,你只能从HTML中使用on*,但在更理想的情况下,你不应该从HTML中做任何类似的事情。
为什么它在今天占主导地位?这样写起来更快,更容易学习,而且更容易工作。
HTML中onload的全部意义在于首先提供对addEventListener方法或功能的访问。通过在JS中使用它,当你可以直接应用它时,你会通过HTML。
假设你可以创建自己的属性:
$('[myclick]').each(function(i, v) {
v.addEventListener('click', function() {
eval(v.myclick); // eval($(v).attr('myclick'));
});
});
JS所做的与此有点不同。
你可以将它等同于(对于创建的每个元素):
element.addEventListener('click', function() {
switch(typeof element.onclick) {
case 'string':eval(element.onclick);break;
case 'function':element.onclick();break;
}
});
实际的实现细节可能会有所不同,有一系列微妙的变化,使两者在某些情况下略有不同,但这是它的要点。
这可以说是一种兼容性hack,您可以将一个函数固定到一个on属性,因为默认属性都是字符串。
其他回答
addEventListener允许您设置多个处理程序,但在IE8或更低版本中不支持。
IE确实有attachEvent,但它并不完全相同。
如果你有另外两个函数,你可以看到区别:
var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;
h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);
函数2、3和4可以工作,但函数1不行。这是因为addEventListener不会覆盖现有的事件处理程序,而onclick会覆盖任何现有的onclick = fn事件处理程序。
当然,另一个重要的区别是onclick总是可以工作,而addEventListener在版本9之前的ie中不能工作。你可以在IE <9中使用类似的attachEvent(语法略有不同)。
let element = document.queryselector('id or classname');
element.addeventlistiner('click',()=>{
do work
})
<button onclick="click()">click</click>`
function click(){
do work
};
也可以通过对侦听器进行原型化(如果我们有对它的引用,而且它不是匿名函数)来扩展侦听器,或者使onclick调用成为对函数库的调用(函数调用其他函数)。
如:
elm.onclick = myFunctionList;
function myFunctionList(){
myFunc1();
myFunc2();
}
这意味着我们永远不需要改变onclick调用,只需要改变myFunctionList()函数来做任何我们想做的事情,但这让我们无法控制冒泡/捕获阶段,所以应该避免在新浏览器中使用。
我想Chris Baker在一个很好的答案中总结了它,但我想添加到addEventListener()中,你也可以使用options参数,它可以让你更好地控制你的事件。例如,如果你只想运行你的事件一次,那么你可以在添加事件时使用{once: true}作为一个选项参数,只调用它一次。
function greet() {
console.log("Hello");
}
document.querySelector("button").addEventListener('click', greet, { once: true })
上面的函数只打印“Hello”一次。 此外,如果你想清理你的事件,那么还有removeEventListener()选项。虽然使用addEventListener()有优点,但如果您的目标受众使用Internet Explorer,则此方法可能并不适用于所有情况,您仍然应该小心。你也可以在MDN上读到addEventListener,他们对如何使用它们给出了很好的解释。