addEventListener vs onclick

addEventListener和onclick有什么区别?

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代码一起驻留在一个单独的.js文件中，它们都可以完美地工作。

当前回答

简介:

addEventListener可以添加多个事件，而onclick则不能这样做。 onclick可以作为HTML属性添加，而addEventListener只能添加在<script>元素中。 addEventListener可以接受第三个参数，该参数可以停止事件传播。

两者都可用于处理事件。然而，addEventListener应该是首选的选择，因为它可以做onclick做的所有事情，甚至更多。不要使用内联onclick作为HTML属性，因为这会混淆javascript和HTML，这是一个坏的做法。它使代码更难维护。

2018-08-25 09:48:17

其他回答

addEventListener允许您设置多个处理程序，但在IE8或更低版本中不支持。

IE确实有attachEvent，但它并不完全相同。

2011-06-14 18:52:45

元素。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")
})

2020-02-10 05:22:45

一个元素对每种事件类型只能有一个事件处理程序，但可以有多个事件监听器。

那么，它的实际情况如何呢?

只有最后分配的事件处理程序才会运行:

const button = document.querySelector(".btn")
button.onclick = () => {
  console.log("Hello World");
};
button.onclick = () => {
  console.log("How are you?");
};
button.click() // "How are you?"

所有事件监听器将被触发:

const button = document.querySelector(".btn")
button.addEventListener("click", event => {
  console.log("Hello World");
})
button.addEventListener("click", event => {
  console.log("How are you?");
})
button.click() 
// "Hello World"
// "How are you?"

IE注:attachEvent不再支持。从IE 11开始，使用addEventListener: docs。

2020-11-23 14:12:47

“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);)，它使用显式绑定。

2014-01-13 01:02:23

我想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，他们对如何使用它们给出了很好的解释。

2021-05-07 12:35:43

addEventListener vs onclick

推荐文章

最新文章

标签