addEventListener和onclick有什么区别?
var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);
上面的代码一起驻留在一个单独的.js文件中，它们都可以完美地工作。
虽然onclick可以在所有浏览器中工作，但addEventListener不能在旧版本的Internet Explorer中工作，后者使用attachEvent代替。
onclick的缺点是只能有一个事件处理程序，而其他两个将触发所有注册的回调。
如果你有另外两个函数，你可以看到区别:
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(语法略有不同)。
这两种方法都是正确的，但没有一种方法本身是“最好的”，开发人员选择使用这两种方法可能是有原因的。
《捉鬼列表和衰人》
早期版本的Internet Explorer对JavaScript的实现与其他浏览器几乎不同。对于小于9的版本，您使用attachEvent[doc]方法，如下所示:
element.attachEvent('onclick', function() { /* do stuff here*/ });
在大多数其他浏览器(包括ie9及以上)中，您使用addEventListener[doc]，如下所示:
element.addEventListener('click', function() { /* do stuff here*/ }, false);
使用这种方法(DOM Level 2事件)，理论上可以将无限数量的事件附加到任何单个元素。唯一的实际限制是客户端内存和其他性能问题，这对于每个浏览器都是不同的。
上面的例子表示使用匿名函数[doc]。你也可以使用函数引用[doc]或闭包[doc]来添加事件监听器:
var myFunctionReference = function() { /* do stuff here*/ }
element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);
addEventListener的另一个重要特性是final参数，它控制监听器如何对冒泡事件做出反应。我在示例中传递了false，这可能是95%用例的标准。对于attachEvent，或者在使用内联事件时，没有等效的参数。
内联事件(HTML onclick=""属性和元素。onclick)
在所有支持javascript的浏览器中，您都可以将事件监听器内联，也就是在HTML代码中。你可能看过这个:
<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>
大多数有经验的开发人员都避免使用这种方法，但它确实可以完成工作;它简单直接。这里您不能使用闭包或匿名函数(尽管处理程序本身是某种匿名函数)，而且您对作用域的控制是有限的。
你提到的另一种方法:
element.onclick = function () { /*do stuff here */ };
．.． 它相当于内联javascript，只不过你可以更好地控制作用域(因为你写的是脚本而不是HTML)，并且可以使用匿名函数、函数引用和/或闭包。
内联事件的显著缺点是，与上面描述的事件侦听器不同，您可能只分配了一个内联事件。内联事件存储为元素[doc]的属性/属性，这意味着它可以被覆盖。
使用上面HTML中的例子<a>:
var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };
．.． 当你点击元素时，你只会看到“Did stuff #2”——你用第二个值覆盖了onclick属性的第一个赋值，你也覆盖了原始的HTML内嵌onclick属性。点击这里查看:http://jsfiddle.net/jpgah/。
一般来说，不要使用内联事件。它可能有特定的用例，但是如果您不能100%确定您有这个用例，那么您就不应该也不应该使用内联事件。
现代Javascript (Angular之类的)
自从这个答案最初发布以来，像Angular这样的javascript框架已经变得更加流行。你会在Angular模板中看到这样的代码:
<button (click)="doSomething()">Do Something</button>
这看起来像一个内联事件，但它不是。这种类型的模板将转换为更复杂的代码，在幕后使用事件侦听器。我在这里所写的关于事件的所有内容仍然适用，但你至少从本质上被移除了一层。您应该了解具体细节，但如果您的现代JS框架最佳实践涉及在模板中编写这类代码，不要觉得您在使用内联事件——您不是。
哪个是最好的?
The question is a matter of browser compatibility and necessity. Do you need to attach more than one event to an element? Will you in the future? Odds are, you will. attachEvent and addEventListener are necessary. If not, an inline event may seem like they'd do the trick, but you're much better served preparing for a future that, though it may seem unlikely, is predictable at least. There is a chance you'll have to move to JS-based event listeners, so you may as well just start there. Don't use inline events.
jQuery和其他javascript框架将DOM级别2事件的不同浏览器实现封装在通用模型中，这样您就可以编写跨浏览器兼容的代码，而不必担心IE的反叛历史。相同的代码与jQuery，所有跨浏览器和准备摇滚:
$(element).on('click', function () { /* do stuff */ });
但是，不要仅仅为了这一件事而去找一个框架。你可以很容易地使用自己的小工具来处理旧的浏览器:
function addEvent(element, evnt, funct){
if (element.attachEvent)
return element.attachEvent('on'+evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
// example
addEvent(
document.getElementById('myElement'),
'click',
function () { alert('hi!'); }
);
试试吧:http://jsfiddle.net/bmArj/
考虑到所有这些因素，除非您正在查看的脚本以其他方式考虑了浏览器差异(在您的问题中没有显示的代码中)，否则使用addEventListener的部分将无法在小于9的IE版本中工作。
文档及相关阅读
W3 HTML规范，元素事件处理程序属性 元素。addEventListener在MDN 元素。attachEvent在MSDN上 Jquery.on quirksmode博客“事件介绍” cdn托管的javascript库在谷歌
据我所知，DOM“加载”事件仍然只发挥非常有限的作用。这意味着它只会触发窗口对象，图像和<script>元素。直接onload赋值也是如此。这两者在技术上没有区别。也许.onload =具有更好的跨浏览器可用性。
但是，您不能将加载事件分配给<div>或<span>元素等。
“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);)，它使用显式绑定。
如果你不太担心浏览器的支持，有一种方法可以在事件调用的函数中重新绑定'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上运行得很好，并且可能有一些关于“绑定”与其他浏览器兼容的问题。
使用内联处理程序与内容安全策略不兼容，因此addEventListener方法从这个角度来看更安全。当然，您可以使用unsafe-inline来启用内联处理程序，但是，顾名思义，它并不安全，因为它会带来CSP阻止的大量JavaScript漏洞。
一个细节还没有被注意到:现代桌面浏览器将不同的按钮按下视为AddEventListener的“单击”(默认为“单击”和“onclick”)。
在Chrome 42和IE11上，onclick和AddEventListener都单击左边的fire和中间的click。 在Firefox 38上，onclick只在左键点击时触发，但AddEventListener点击在左、中、右击时触发。
此外，当使用滚动游标时，中键点击行为在浏览器中非常不一致:
在Firefox上，中键单击事件总是会触发。 在Chrome浏览器上，如果中间点击打开或关闭滚动光标，它们不会触发。 在IE上，它们会在滚动光标关闭时触发，但不会在打开时触发。
同样值得注意的是，任何键盘可选择的HTML元素(如input)的“click”事件也会在元素被选中时触发空格或enter。
也可以通过对侦听器进行原型化(如果我们有对它的引用，而且它不是匿名函数)来扩展侦听器，或者使onclick调用成为对函数库的调用(函数调用其他函数)。
如:
elm.onclick = myFunctionList;
function myFunctionList(){
myFunc1();
myFunc2();
}
这意味着我们永远不需要改变onclick调用，只需要改变myFunctionList()函数来做任何我们想做的事情，但这让我们无法控制冒泡/捕获阶段，所以应该避免在新浏览器中使用。
在这个回答中，我将描述定义DOM事件处理程序的三种方法。
element.addEventListener（）
代码示例:
const element = document.querySelector('a'); 元素。addEventListener('click'， event => event. preventdefault ()， true); <a href="//google.com">试着点击这个链接
addeventlistener()有多个优点:
Allows you to register unlimited events handlers and remove them with element.removeEventListener(). Has useCapture parameter, which indicates whether you'd like to handle event in its capturing or bubbling phase. See: Unable to understand useCapture attribute in addEventListener. Cares about semantics. Basically, it makes registering event handlers more explicit. For a beginner, a function call makes it obvious that something happens, whereas assigning event to some property of DOM element is at least not intuitive. Allows you to separate document structure (HTML) and logic (JavaScript). In tiny web applications it may not seem to matter, but it does matter with any bigger project. It's way much easier to maintain a project which separates structure and logic than a project which doesn't. Eliminates confusion with correct event names. Due to using inline event listeners or assigning event listeners to .onevent properties of DOM elements, lots of inexperienced JavaScript programmers thinks that the event name is for example onclick or onload. on is not a part of event name. Correct event names are click and load, and that's how event names are passed to .addEventListener(). Works in almost all browser. If you still have to support IE <= 8, you can use a polyfill from MDN.
元素。Onevent = function(){}(例如onclick, onload)
代码示例:
const element = document.querySelector('a'); 元素。onclick = event => event. preventdefault (); <a href="//google.com">试着点击这个链接
这是在DOM 0中注册事件处理程序的一种方法。现在不鼓励这样做，因为:
Allows you to register only one event handler. Also removing the assigned handler is not intuitive, because to remove event handler assigned using this method, you have to revert onevent property back to its initial state (i.e. null). Doesn't respond to errors appropriately. For example, if you by mistake assign a string to window.onload, for example: window.onload = "test";, it won't throw any errors. Your code wouldn't work and it would be really hard to find out why. .addEventListener() however, would throw error (at least in Firefox): TypeError: Argument 2 of EventTarget.addEventListener is not an object. Doesn't provide a way to choose if you want to handle event in its capturing or bubbling phase.
内联事件处理程序(onevent HTML属性)
代码示例:
<a href="//google.com" onclick="event.preventDefault();>试着点击这个链接
类似于element。Onevent，现在不鼓励了。除了那个元素的问题。Onevent有，它:
Is a potential security issue, because it makes XSS much more harmful. Nowadays websites should send proper Content-Security-Policy HTTP header to block inline scripts and allow external scripts only from trusted domains. See How does Content Security Policy work? Doesn't separate document structure and logic. If you generate your page with a server-side script, and for example you generate a hundred links, each with the same inline event handler, your code would be much longer than if the event handler was defined only once. That means the client would have to download more content, and in result your website would be slower.
另请参阅
EventTarget.addEventListener()文档(MDN) EventTarget.removeEventListener()文档(MDN) onclick vs addEventListener Dom-events标记wiki
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属性，因为默认属性都是字符串。
根据MDN，差异如下:
addEventListener:
EventTarget.addEventListener()方法添加指定的 对象的事件侦听器列表中的 在调用它的EventTarget上指定的事件类型。的 事件目标可以是文档中的一个元素，文档本身，一个 窗口或任何其他支持事件的对象(例如 XMLHttpRequest)。
onclick:
属性上的单击事件处理程序代码 当前元素。当使用click事件触发操作时，也是如此 考虑将相同的操作添加到keydown事件，以允许 不使用鼠标或触摸的人使用相同的动作 屏幕上。语法元素。onclick = functionRef;where functionRef是a 函数——通常是在别处声明的函数名或函数名 表达式。详见“JavaScript指南:函数”。
在使用中也有语法差异，你可以在下面的代码中看到: addEventListener:
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
onclick:
function initElement() {
var p = document.getElementById("foo");
// NOTE: showAlert(); or showAlert(param); will NOT work here.
// Must be a reference to a function name, not a function call.
p.onclick = showAlert;
};
function showAlert(event) {
alert("onclick Event detected!");
}
简介:
addEventListener可以添加多个事件，而onclick则不能这样做。 onclick可以作为HTML属性添加，而addEventListener只能添加在<script>元素中。 addEventListener可以接受第三个参数，该参数可以停止事件传播。
两者都可用于处理事件。然而，addEventListener应该是首选的选择，因为它可以做onclick做的所有事情，甚至更多。不要使用内联onclick作为HTML属性，因为这会混淆javascript和HTML，这是一个坏的做法。它使代码更难维护。
元素。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")
})
onclick基本上是一个addEventListener，当元素被单击时，它专门执行一个函数。当你有一个做简单操作的按钮时，它很有用，比如计算器按钮。addEventlistener可以用于很多事情，比如在加载DOM或所有内容时执行一个操作，类似于window。Onload，但有更多的控制。
注意，实际上可以使用内联使用多个事件，或者至少可以使用onclick，用分号分隔每个函数，例如....
我不会写一个内联函数，因为你可能会有潜在的问题，这将是混乱的imo。只需使用它来调用脚本文件中已经完成的函数。
你用哪一个取决于你想要什么。addEventListener用于复杂操作，onclick用于简单操作。我见过一些项目没有为元素附加一个特定的事件监听器，而是实现了一个更全局的事件监听器，它将确定是否点击了按钮，并根据所按的按钮执行某些任务。在我看来，这可能会导致潜在的问题，尽管很小，可能，资源浪费，如果事件监听器必须处理每一个点击
一个元素对每种事件类型只能有一个事件处理程序，但可以有多个事件监听器。
那么，它的实际情况如何呢?
只有最后分配的事件处理程序才会运行:
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。
let element = document.queryselector('id or classname');
element.addeventlistiner('click',()=>{
do work
})
<button onclick="click()">click</click>`
function click(){
do work
};
我想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，他们对如何使用它们给出了很好的解释。
你也应该考虑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”…读一读吧!
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >
