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文件中,它们都可以完美地工作。
当前回答
虽然onclick可以在所有浏览器中工作,但addEventListener不能在旧版本的Internet Explorer中工作,后者使用attachEvent代替。
onclick的缺点是只能有一个事件处理程序,而其他两个将触发所有注册的回调。
其他回答
let element = document.queryselector('id or classname');
element.addeventlistiner('click',()=>{
do work
})
<button onclick="click()">click</click>`
function click(){
do work
};
虽然onclick可以在所有浏览器中工作,但addEventListener不能在旧版本的Internet Explorer中工作,后者使用attachEvent代替。
onclick的缺点是只能有一个事件处理程序,而其他两个将触发所有注册的回调。
简介:
addEventListener可以添加多个事件,而onclick则不能这样做。 onclick可以作为HTML属性添加,而addEventListener只能添加在<script>元素中。 addEventListener可以接受第三个参数,该参数可以停止事件传播。
两者都可用于处理事件。然而,addEventListener应该是首选的选择,因为它可以做onclick做的所有事情,甚至更多。不要使用内联onclick作为HTML属性,因为这会混淆javascript和HTML,这是一个坏的做法。它使代码更难维护。
使用内联处理程序与内容安全策略不兼容,因此addEventListener方法从这个角度来看更安全。当然,您可以使用unsafe-inline来启用内联处理程序,但是,顾名思义,它并不安全,因为它会带来CSP阻止的大量JavaScript漏洞。
也可以通过对侦听器进行原型化(如果我们有对它的引用,而且它不是匿名函数)来扩展侦听器,或者使onclick调用成为对函数库的调用(函数调用其他函数)。
如:
elm.onclick = myFunctionList;
function myFunctionList(){
myFunc1();
myFunc2();
}
这意味着我们永远不需要改变onclick调用,只需要改变myFunctionList()函数来做任何我们想做的事情,但这让我们无法控制冒泡/捕获阶段,所以应该避免在新浏览器中使用。