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文件中,它们都可以完美地工作。
当前回答
“this”关键字在JavasSript中引用的上下文是不同的。
请看下面的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input id="btnSubmit" type="button" value="Submit" />
<script>
function disable() {
this.disabled = true;
}
var btnSubmit = document.getElementById('btnSubmit');
btnSubmit.onclick = disable();
//btnSubmit.addEventListener('click', disable, false);
</script>
</body>
</html>
它的功能非常简单。当您点击该按钮时,该按钮将自动禁用。
首先,当您尝试以这种方式按钮连接事件时。Onclick = function(), 点击按钮会触发Onclick事件,但是,按钮不会被禁用,因为按钮之间没有显式的绑定。Onclick和Onclick事件处理器。如果你调试看到'this'对象,你可以看到它指向'window'对象。
其次,如果你评论btnSubmit。Onclick =禁用();和取消 / / btnSubmit。addEventListener('点击',禁用,false);您可以看到按钮是禁用的,因为通过这种方式,按钮之间有显式绑定。点击事件和点击事件处理程序。如果你调试为禁用功能,你可以看到“this”指的是按钮控件而不是窗口。
这是我不喜欢JavaScript不一致的地方。 顺便说一句,如果你使用jQuery($('#btnSubmit')。On ('click', disable);),它使用显式绑定。
其他回答
元素。Onclick = function() {/* do stuff */} 元素。addEventListener('click', function(){/* do stuff */},false);
它们显然做同样的事情:监听click事件并执行回调函数。然而,它们是不相等的。如果你需要在两者之间做出选择,这可以帮助你弄清楚哪一个最适合你。
主要的区别是onclick只是一个属性,像所有对象属性一样,如果你写了多次,它将被覆盖。而使用addEventListener(),我们可以简单地将事件处理程序绑定到元素,并且可以在每次需要时调用它,而不用担心任何重写的属性。 例子如下,
试试吧:https://jsfiddle.net/fjets5z4/5/
首先,我想继续使用onclick,因为它更短,看起来更简单,事实上也是如此。但我不建议再使用它了。这就像使用内联JavaScript一样。使用内联JavaScript之类的东西现在是非常不鼓励的(内联CSS也是不鼓励的,但这是另一个话题)。
然而,addEventListener()函数尽管是标准的,但在旧的浏览器(Internet Explorer低于版本9)中不能工作,这是另一个很大的区别。如果您需要支持这些古老的浏览器,您应该遵循onclick方式。但是你也可以使用jQuery(或它的替代品之一):它基本上简化了你的工作,减少了浏览器之间的差异,因此可以节省你很多时间。
var clickEvent = document.getElementByID("onclick-eg");
var EventListener = document.getElementByID("addEventListener-eg");
clickEvent.onclick = function(){
window.alert("1 is not called")
}
clickEvent.onclick = function(){
window.alert("1 is not called, 2 is called")
}
EventListener.addEventListener("click",function(){
window.alert("1 is called")
})
EventListener.addEventListener("click",function(){
window.alert("2 is also called")
})
虽然onclick可以在所有浏览器中工作,但addEventListener不能在旧版本的Internet Explorer中工作,后者使用attachEvent代替。
onclick的缺点是只能有一个事件处理程序,而其他两个将触发所有注册的回调。
使用内联处理程序与内容安全策略不兼容,因此addEventListener方法从这个角度来看更安全。当然,您可以使用unsafe-inline来启用内联处理程序,但是,顾名思义,它并不安全,因为它会带来CSP阻止的大量JavaScript漏洞。
一个细节还没有被注意到:现代桌面浏览器将不同的按钮按下视为AddEventListener的“单击”(默认为“单击”和“onclick”)。
在Chrome 42和IE11上,onclick和AddEventListener都单击左边的fire和中间的click。 在Firefox 38上,onclick只在左键点击时触发,但AddEventListener点击在左、中、右击时触发。
此外,当使用滚动游标时,中键点击行为在浏览器中非常不一致:
在Firefox上,中键单击事件总是会触发。 在Chrome浏览器上,如果中间点击打开或关闭滚动光标,它们不会触发。 在IE上,它们会在滚动光标关闭时触发,但不会在打开时触发。
同样值得注意的是,任何键盘可选择的HTML元素(如input)的“click”事件也会在元素被选中时触发空格或enter。
根据MDN,差异如下:
addEventListener:
EventTarget.addEventListener()方法添加指定的 对象的事件侦听器列表中的 在调用它的EventTarget上指定的事件类型。的 事件目标可以是文档中的一个元素,文档本身,一个 窗口或任何其他支持事件的对象(例如 XMLHttpRequest)。
onclick:
属性上的单击事件处理程序代码 当前元素。当使用click事件触发操作时,也是如此 考虑将相同的操作添加到keydown事件,以允许 不使用鼠标或触摸的人使用相同的动作 屏幕上。语法元素。onclick = functionRef;where functionRef是a 函数——通常是在别处声明的函数名或函数名 表达式。详见“JavaScript指南:函数”。
在使用中也有语法差异,你可以在下面的代码中看到: addEventListener:
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
onclick:
function initElement() {
var p = document.getElementById("foo");
// NOTE: showAlert(); or showAlert(param); will NOT work here.
// Must be a reference to a function name, not a function call.
p.onclick = showAlert;
};
function showAlert(event) {
alert("onclick Event detected!");
}