addEventListener 如何影响 DOM 元素的 onclick 属性？答案

【问题标题】：How addEventListener influences the onclick property of DOM element?addEventListener 如何影响 DOM 元素的 onclick 属性？
【发布时间】：2011-07-23 21:40:10
【问题描述】：

element.onclick = function() { alert(1); } 

alert(element.onclick);

上面的代码会输出function () { alert(1); }

然后我继续执行以下代码：

element.addEventListener('click', function() { alert(2); }, false);
alert(element.onclick);

输出仍然是 function () { alert(1); }

事实上，现在点击元素时，代码 addEventListener('click', function() { alert(2); }, false); 有效，这意味着新函数 alert(2) 已写入此元素的 onclick 属性。但是为什么输出还是没有变化呢？

那么，我想知道的是，在执行addEventListener时，onclick属性是如何变化的？

期待您的回复。

【问题讨论】：

我为此做了一个小提琴：jsfiddle.net/billymoon/9sNqq
另外 - 添加两个点击处理程序时，它们都运行，而不仅仅是第二个，因此添加事件侦听器不会删除前一个。看来 element.onclick 只是返回第一次点击事件函数。
这将对您有所帮助：developer.mozilla.org/en/DOM/element.addEventListener#Notes

标签： javascript javascript-events addeventlistener

【解决方案1】：

“onfoo”属性独立于通过“addEventListener()”访问的事件处理程序管理系统。最好使用其中之一，而不是两者都使用，正确的选择是更灵活且不干扰的“addEventListener()”（如果可用）。

【讨论】：

根据this article，“onfoo”属性被视为冒泡阶段的注册。

【解决方案2】：

OnClick 是 DOM 级别 0 属性。 AddEventListener 是 DOM Level 2 定义的一部分。通过 AddEventListener 方法添加事件处理程序不会更改元素上的 OnClick 属性，而是将侦听器添加到元素上的事件侦听器集合中。您可以在http://www.w3.org/TR/DOM-Level-2-Events/events.html 找到更多关于 DOM 级别 2 事件的信息。 http://en.wikipedia.org/wiki/DOM_events也有一篇不错的文章。

【讨论】：