addEventListener vs onclick

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属性，因为默认属性都是字符串。

2017-03-07 21:12:45

其他回答

onclick基本上是一个addEventListener，当元素被单击时，它专门执行一个函数。当你有一个做简单操作的按钮时，它很有用，比如计算器按钮。addEventlistener可以用于很多事情，比如在加载DOM或所有内容时执行一个操作，类似于window。Onload，但有更多的控制。

注意，实际上可以使用内联使用多个事件，或者至少可以使用onclick，用分号分隔每个函数，例如....

我不会写一个内联函数，因为你可能会有潜在的问题，这将是混乱的imo。只需使用它来调用脚本文件中已经完成的函数。

你用哪一个取决于你想要什么。addEventListener用于复杂操作，onclick用于简单操作。我见过一些项目没有为元素附加一个特定的事件监听器，而是实现了一个更全局的事件监听器，它将确定是否点击了按钮，并根据所按的按钮执行某些任务。在我看来，这可能会导致潜在的问题，尽管很小，可能，资源浪费，如果事件监听器必须处理每一个点击

2020-03-01 20:33:01

简介:

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

如果你有另外两个函数，你可以看到区别:

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(语法略有不同)。

2011-06-14 18:52:39

“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

addEventListener vs onclick

推荐文章

最新文章

标签