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

其他回答

你也应该考虑eventdelegate ! 因此，我更喜欢addEventListener，最重要的是小心谨慎地使用它!

事实:

eventlistener是沉重的....(客户端内存分配) 事件在与DOM的关系中传播IN，然后再次传播OUT 树。也被称为涓滴式和冒泡式，读一读以防你不知道。

想象一个简单的例子: 一个简单的按钮内部div内部主体… 如果你点击按钮，一个事件将无论如何滴入到BUTTON，然后再OUT，像这样:

window-document-div-button-div-document-window

在浏览器后台(比如JS引擎的软件外围)，浏览器只能对点击做出反应，如果它检查了每一次点击的目标位置。

为了确保每个可能的事件监听器都被触发，它必须从文档级别一直发送“点击事件信号”到元素中。然后再回来。这个行为可以通过附加eventlistener来使用，例如:

document.getElementById("exampleID").addEventListener("click",(event) => {doThis}, true/false);

请注意，作为addEventListener方法最后一个参数的true/false控制了何时识别事件的行为——何时流入或何时流出。

TRUE表示事件在传入时被识别 FALSE表示事件在冒泡输出的过程中被识别

实现以下2个有用的概念，使用上述方法处理问题也会更加直观:

You can also use event.stopPropagation() within the function (example ref. "doThis") to prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, you could use event.preventDefault() within the function (example ref. "doThis"). With that you could for example tell the Browser that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

还需要再次注意这里的参考:addEventListener方法的最后一个参数(true/false)也控制了“. stoppropagation()”的最终效果在哪个阶段生效(涓滴为true或冒头为false)。所以…如果你将一个带有TRUE标志的EventListener应用到一个元素，并将其与.stopPropagation()方法结合起来，事件甚至不会通过元素的潜在内部子元素

总结一下: 如果你在HTML中使用onClick变体…对我来说有两个缺点:

与addEventListener，你可以附加多个onClick事件到相同的，分别是一个单一的元素，但这是不可能使用onClick(至少这是我坚信到目前为止，如果我错了，请纠正我)。以下方面也确实值得注意……特别是代码维护部分(到目前为止还没有详细说明):

In regards to event delegation, it really boils down to this. If some other JavaScript code needs to respond to a click event, using addEventListener ensures you both can respond to it. If you both try using onclick, then one stomps on the other. You both can't respond if you want an onclick on the same element. Furthermore, you want to keep your behavior as separate as you can from the HTML in case you need to change it later. It would suck to have 50 HTML files to update instead of one JavaScript file. (credit to Greg Burghardt, addEventListener vs onclick with regards to event delegation )

这也被称为“Unobtrusive JavaScript”…读一读吧!

2021-10-03 19:53:27

虽然onclick可以在所有浏览器中工作，但addEventListener不能在旧版本的Internet Explorer中工作，后者使用attachEvent代替。

onclick的缺点是只能有一个事件处理程序，而其他两个将触发所有注册的回调。

2011-06-14 18:52:21

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

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

2018-08-25 09:48:17

let element = document.queryselector('id or classname'); 
element.addeventlistiner('click',()=>{
  do work
})

<button onclick="click()">click</click>`
function click(){
  do work
};

2021-02-19 19:41:38

addEventListener vs onclick

推荐文章

最新文章

标签