addEventListener和onclick有什么区别?

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

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


当前回答

如果你不太担心浏览器的支持,有一种方法可以在事件调用的函数中重新绑定'this'引用。它通常指向在函数执行时生成事件的元素,这并不总是您想要的。棘手的部分是同时能够删除相同的事件侦听器,如本例所示:http://jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

上面的代码在Chrome上运行得很好,并且可能有一些关于“绑定”与其他浏览器兼容的问题。

其他回答

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

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

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

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

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

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

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

据我所知,DOM“加载”事件仍然只发挥非常有限的作用。这意味着它只会触发窗口对象,图像和<script>元素。直接onload赋值也是如此。这两者在技术上没有区别。也许.onload =具有更好的跨浏览器可用性。

但是,您不能将加载事件分配给<div>或<span>元素等。

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