blocks|key|650761|text|虽然onclick可以在所有浏览器中运行，但addEventListener不能在使用attachEvent的Internet+Explorer的旧版本中运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|650762|onclick的缺点是只能有一个事件处理程序，而其他两个将触发所有已注册的回调函数。|650763|entityMap^0|2|7|M|G|17|B|0|0|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

While <code>onclick</code> works in all browsers, <code>addEventListener</code> does not work in older versions of Internet Explorer, which uses <code>attachEvent</code> instead.

The downside of <code>onclick</code> is that there can only be one event handler, while the other two will fire all registered callbacks.

blocks|key|650797|text|addEventListener允许您设置多个处理程序，但在IE8或更低版本中不受支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|650798|IE确实有attachEvent，但并不完全一样。|650799|entityMap^0|0|G|0|5|B|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<code>addEventListener</code> lets you set multiple handlers, but isn't supported in IE8 or lower.

IE does have <code>attachEvent</code>, but it's not exactly the same.

blocks|key|650814|text|据我所知，DOM+"load“事件仍然只能起到非常有限的作用。这意味着它只会为window+object、images和<script>元素触发。直接onload赋值也是如此。这两者在技术上没有区别。可能.onload+=有更好的跨浏览器可用性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|650815|但是，您不能将load+event分配给<div>或元素等。|650816|entityMap^0|13|D|1H|6|1O|8|23|6|2U|9|0|7|A|K|5|Q|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$]]

As far as I know, the DOM "load" event still does only work very limited. That means it'll only fire for the <code>window object</code>, <code>images</code> and <code>&lt;script&gt;</code> elements for instance. The same goes for the direct <code>onload</code> assignment. There is no technical difference between those two. Probably <code>.onload =</code> has a better cross-browser availabilty.

However, you cannot assign a <code>load event</code> to a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element or whatnot.

blocks|key|650878|text|JavasSript中的'this'关键字引用的上下文不同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|650879|请看下面的代码：|650880|<!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>|code-block|syntax|javascript|650881|它的作用非常简单。单击该按钮时，该按钮将自动禁用。|650882|首先，当您尝试以这种方式挂钩事件时，onclick事件将通过单击按钮来触发，但是，该按钮将不会被禁用，因为在button.onclick和button.onclick+=+function(),事件处理程序之间没有显式绑定。如果您调试时看到了'this'对象，就会看到它引用了'window'对象。|650883|其次，如果您注释btnSubmit.onclick+=+disable();并取消注释onclick，您可以看到该按钮被禁用，因为通过这种方式，在button.onclick事件和onclick事件处理程序之间存在显式绑定。如果您调试到disable函数，您可以看到'this'引用的是button+control而不是window。|650884|这就是我不喜欢JavaScript的地方，那就是不一致。顺便说一句，如果您使用的是jQuery($('#btnSubmit').on('click',+disable);)，它将使用显式绑定。|650885|entityMap^0|C|6|0|0|0|0|1X|S|3D|6|3U|8|0|8|U|3P|6|3Z|E|4G|6|0|1C|11|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|V|$]]

The context referenced by <code>'this'</code> keyword in JavasSript is different.

look at the following code:

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
 &lt;title&gt;&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
 &lt;input id="btnSubmit" type="button" value="Submit" /&gt;
 &lt;script&gt;
 function disable() {
 this.disabled = true;
 }
 var btnSubmit = document.getElementById('btnSubmit');
 btnSubmit.onclick = disable();
 //btnSubmit.addEventListener('click', disable, false);
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

What it does is really simple. when you click the button, the button will be disabled automatically.

First when you try to hook up the events in this way <code>button.onclick = function(),</code>
onclick event will be triggered by clicking the button, however, the button will not be disabled because there's no explicit binding between button.onclick and onclick event handler. If you debug see the <code>'this'</code> object, you can see it refers to <code>'window'</code> object.

Secondly, if you comment <code>btnSubmit.onclick = disable();</code> and uncomment 
<code>//btnSubmit.addEventListener('click', disable, false);</code> you can see that the button is disabled because with this way there's explicit binding between button.onclick event and onclick event handler. If you debug into disable function, you can see <code>'this'</code> refers to the <code>button control</code> rather than the <code>window</code>.

This is something I don't like about JavaScript which is inconsistency.
Btw, if you are using jQuery(<code>$('#btnSubmit').on('click', disable);</code>), it uses explicit binding.

blocks|key|650932|text|如果你不太担心浏览器的支持，有一种方法可以在事件调用的函数中重新绑定'this‘引用。它通常会指向在函数执行时生成事件的元素，这并不总是您想要的。棘手的部分是能够同时删除完全相同的事件侦听器，如下面的示例所示：http://jsfiddle.net/roenbaeck/vBYu3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|650933|/*
++++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);+++++++++++
++++}
}|code-block|syntax|javascript|650934|上面的代码在Chrome中运行得很好，而且可能会有一些让"bind“与其他浏览器兼容的问题。|650935|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/roenbaeck/vBYu3/^0|2X|10|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If you are not too worried about browser support, there is a way to rebind the 'this' reference in the function called by the event. It will normally point to the element that generated the event when the function is executed, which is not always what you want. The tricky part is to at the same time be able to remove the very same event listener, as shown in this example: <a href="http://jsfiddle.net/roenbaeck/vBYu3/" rel="nofollow">http://jsfiddle.net/roenbaeck/vBYu3/</a>

<pre><code>/*
 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); 
 }
}
</code></pre>

The code above works well in Chrome, and there's probably some shim around making "bind" compatible with other browsers.

blocks|key|868345|text|使用内联处理程序与Content+Security+Policy不兼容，因此从这个角度来看，addEventListener方法更安全。当然，您可以使用unsafe-inline启用内联处理程序，但顾名思义，这是不安全的，因为它会带回CSP所阻止的大量JavaScript漏洞。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|868346|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.chrome.com/extensions/contentSecurityPolicy^0|1A|G|24|D|9|N|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Using inline handlers is incompatible with <a href="https://developer.chrome.com/extensions/contentSecurityPolicy" rel="nofollow">Content Security Policy</a> so the <code>addEventListener</code> approach is more secure from that point of view. Of course you can enable the inline handlers with <code>unsafe-inline</code> but, as the name suggests, it's not safe as it brings back the whole hordes of JavaScript exploits that CSP prevents.

blocks|key|651025|text|还可以通过原型化来扩展侦听器(如果我们有对它的引用，并且它不是匿名函数)，并使onclick调用一个对函数库(调用其他函数的函数)的调用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|651026|像这样：|651027|elm.onclick+=+myFunctionList;
function+myFunctionList(){
++++myFunc1();
++++myFunc2();
}|code-block|syntax|javascript|651028|这意味着我们永远不需要更改onclick调用，只需更改函数myFunctionList()来做任何我们想做的事情，但这让我们无法控制冒泡/捕获阶段，因此应该避免在较新的浏览器中使用。|651029|entityMap^0|13|7|0|0|0|D|7|T|G|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

It should also be possible to either extend the listener by prototyping it (if we have a reference to it and its not an anonymous function) -or make the <code>onclick</code> call a call to a function library (a function calling other functions).
Like:
<pre class="lang-js prettyprint-override"><code>elm.onclick = myFunctionList;
function myFunctionList(){
 myFunc1();
 myFunc2();
}
</code></pre>
This means we never have to change the <code>onclick</code> call just alter the function <code>myFunctionList()</code> to do whatever we want, but this leaves us without control of bubbling/catching phases so should be avoided for newer browsers.

blocks|key|868431|text|Javascript倾向于将所有东西混合到对象中，这会使它变得混乱。All+is是JavaScript方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|868432|从本质上讲，onclick是一个HTML属性。相反，addEventListener是DOM对象上表示HTML元素的方法。|868433|在JavaScript对象中，方法只是一个属性，它有一个函数作为值，并针对它所附加的对象工作(例如使用这个)。|868434|在JavaScript中，由DOM表示的HTML元素将把它的属性映射到它的属性。|868435|这就是人们感到困惑的地方，因为JavaScript将所有东西整合到一个容器或名称空间中，没有间接层。|868436|在一个普通的OO布局中(至少合并了属性/方法的命名空间)，你可能会有类似这样的东西：|868437|domElement.addEventListener+//+Object(Method)
domElement.attributes.onload+//+Object(Property(Object(Property(String))))|code-block|syntax|javascript|868438|有一些变体，比如它可以为onload使用getter/setter，或者为属性使用HashMap，但最终它看起来就是这样。JavaScript消除了这种间接层，因为它希望知道什么是什么以及其他事情。它将domElement和属性合并在一起。|868439|为了避免兼容性，您应该使用addEventListener作为最佳实践。由于其他答案谈到了这方面的差异，而不是根本的方案差异，我将放弃这一点。从本质上讲，在理想情况下，您实际上只能在HTML中使用on*，但在更理想的情况下，您不应该在HTML中执行类似的操作。|868440|为什么它会在今天占据主导地位？它写起来更快，更容易学习，而且更容易工作。|868441|onload在HTML语言中的全部意义在于首先提供对addEventListener方法或功能的访问。通过在JS中使用它，您可以在可以直接应用它的时候使用HTML。|868442|假设您可以创建自己的属性：|868443|$('[myclick]').each(function(i,+v)+{
+++++v.addEventListener('click',+function()+{
+++++++++eval(v.myclick);+//+eval($(v).attr('myclick'));
+++++});
});|868444|JS的用法与此略有不同。|868445|您可以将其等同于以下内容(对于创建的每个元素)：|868446|element.addEventListener('click',+function()+{
++++switch(typeof+element.onclick)+{
++++++++++case+'string':eval(element.onclick);break;
++++++++++case+'function':element.onclick();break;
+++++}
});|868447|实际的实现细节可能会因一系列细微的变化而有所不同，这使得两者在某些情况下略有不同，但这就是要点。|868448|可以说，这是一种兼容性技巧，因为在默认情况下，属性都是字符串，所以可以将函数绑定到on属性。|868449|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1H|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|1Q|8|@]|9|@]|A|$O|P]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1S|8|@]|9|@]|A|$]]|$1|16|3|17|5|N|7|1T|8|@]|9|@]|A|$O|P]]|$1|18|3|19|5|6|7|1U|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|1V|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|1D|$]]

Javascript tends to blend everything into objects and that can make it confusing. All into one is the JavaScript way.

Essentially onclick is a HTML attribute. Conversely addEventListener is a method on the DOM object representing a HTML element.

In JavaScript objects, a method is merely a property that has a function as a value and that works against the object it is attached to (using this for example).

In JavaScript as HTML element represented by DOM will have it's attributes mapped onto its properties.

This is where people get confused because JavaScript melds everything into a single container or namespace with no layer of indirection.

In a normal OO layout (which does at least merge the namespace of properties/methods) you would might have something like:

<pre><code>domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))
</code></pre>

There are variations like it could use a getter/setter for onload or HashMap for attributes but ultimately that's how it would look. JavaScript eliminated that layer of indirection at the expect of knowing what's what among other things. It merged domElement and attributes together.

Barring compatibility you should as a best practice use addEventListener. As other answers talk about the differences in that regard rather than the fundamental programmatic differences I will forgo it. Essentially, in an ideal world you're really only meant to use on* from HTML but in an even more ideal world you shouldn't be doing anything like that from HTML.

Why is it dominant today? It's quicker to write, easier to learn and tends to just work.

The whole point of onload in HTML is to give access to the addEventListener method or functionality in the first place. By using it in JS you're going through HTML when you could be applying it directly.

Hypothetically you can make your own attributes:

<pre><code>$('[myclick]').each(function(i, v) {
 v.addEventListener('click', function() {
 eval(v.myclick); // eval($(v).attr('myclick'));
 });
});
</code></pre>

What JS does with is a bit different to that.

You can equate it to something like (for every element created):

<pre><code>element.addEventListener('click', function() {
 switch(typeof element.onclick) {
 case 'string':eval(element.onclick);break;
 case 'function':element.onclick();break;
 }
});
</code></pre>

The actual implementation details will likely differ with a range of subtle variations making the two slightly different in some cases but that's the gist of it.

It's arguably a compatibility hack that you can pin a function to an on attribute since by default attributes are all strings.

blocks|key|868511|text|onclick基本上是一个addEventListener，当元素被单击时，它专门执行一个功能。所以，当你有一个执行简单操作的按钮时很有用，比如计算器按钮。与window.onload类似，addEventlistener可以用于许多事情，比如在加载DOM或所有内容时执行操作，但具有更多的控制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|868512|请注意，您实际上可以通过内联使用多个事件，或者至少通过使用onclick使用分号分隔每个函数，如下所示……|868513|我不会写一个内联的函数，因为你以后可能会有问题，这将是混乱的imo。只需使用它来调用脚本文件中已经完成的函数。|868514|我想你使用哪一个将取决于你想要什么。addEventListener代表复杂操作，onclick代表简单操作。我见过一些项目没有将特定的事件附加到元素上，而是实现了一个更全局的eventlistener，该事件侦听器将确定轻击是否在按钮上，并根据按下的内容执行某些任务。如果事件侦听器必须处理每一次单击，那么这可能会导致潜在问题，虽然很小，但很可能是资源浪费|868515|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

onclick is basically an addEventListener that specifically performs a function when the element is clicked. So, useful when you have a button that does simple operations, like a calculator button. addEventlistener can be used for a multitude of things like performing an operation when DOM or all content is loaded, akin to window.onload but with more control. 

Note, You can actually use more than one event with inline, or at least by using onclick by seperating each function with a semi-colon, like this.... 

I wouldn't write a function with inline, as you could potentially have problems later and it would be messy imo. Just use it to call functions already done in your script file.

Which one you use I suppose would depend on what you want. addEventListener for complex operations and onclick for simple. I've seen some projects not attach a specific one to elements and would instead implement a more global eventlistener that would determine if a tap was on a button and perform certain tasks depending on what was pressed. Imo that could potentially lead to problems I'd think, and albeit small, probably, a resource waste if that eventlistener had to handle each and every click

blocks|key|651162|text|let+element+=+document.queryselector('id+or+classname');+
element.addeventlistiner('click',()=>{
++do+work
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|651163|unstyled|651164|<button+onclick="click()">click</click>`
function+click(){
++do+work
};|651165|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|K|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|L|8|@]|9|@]|A|$B|C]]|$1|H|3|-4|5|E|7|M|8|@]|9|@]|A|$]]]|I|$]]

<pre><code>let element = document.queryselector('id or classname'); 
element.addeventlistiner('click',()=&gt;{
 do work
})
</code></pre>
<hr />
<pre><code>&lt;button onclick=&quot;click()&quot;&gt;click&lt;/click&gt;`
function click(){
 do work
};
</code></pre>

blocks|key|651249|text|我猜Chris+Baker在一个很好的回答中总结了这一点，但我想补充一下，在addEventListener()中，你还可以使用options参数，它可以让你更好地控制你的事件。例如，如果你只想运行你的事件一次，那么你可以在添加事件时使用{+once:+true+}作为一个选项参数来只调用它一次。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651250|++++function+greet()+{
++++console.log("Hello");
++++}+++
++++document.querySelector("button").addEventListener('click',+greet,+{+once:+true+})|code-block|syntax|javascript|651251|上面的函数只会打印"Hello“一次。另外，如果你想清理你的事件，也可以选择removeEventListener()。尽管使用addEventListener()有很多优点，但是如果您的目标受众使用的是Internet+Explorer，那么这种方法可能不会在所有情况下都有效。你也可以在MDN上读到关于addEventListener的文章，他们对如何使用它们做了很好的解释。|offset|length|651252|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#why_use_addeventlistener^0|0|0|41|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I guess Chris Baker pretty much summed it up in an excellent answer but I would like to add to that with addEventListener() you can also use options parameter which gives you more control over your events. For example - If you just want to run your event once then you can use { once: true } as an option parameter when adding your event to only call it once.
<pre><code> function greet() {
 console.log(&quot;Hello&quot;);
 } 
 document.querySelector(&quot;button&quot;).addEventListener('click', greet, { once: true })
</code></pre>
The above function will only print &quot;Hello&quot; once.
Also, if you want to cleanup your events then there is also the option to removeEventListener(). Although there are advantages of using addEventListener() but you should still be careful if your targeting audience is using Internet Explorer then this method might not work in all situation. You can also read about addEventListener on <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#why_use_addeventlistener" rel="nofollow noreferrer">MDN</a>, they gave quite a good explanation on how to use them.

What's the difference between <code>addEventListener</code> and <code>onclick</code>?

<pre><code>var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
</code></pre>

The code above resides together in a separate .js file, and they both work perfectly.

addEventListener vs onclick

容器

jQuery

addEventListener和onclick有什么不同var h = document.getElementById("a");h.onclick = dothing1;h.addEventListener("click", dothing2);上面的代码一起驻留在一个单独的.js文件中，它们都可以完美地工作。

问addEventListener vs onclick
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问addEventListener vs onclickEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问addEventListener vs onclick
EN