为 DOM 对象设置事件处理程序答案

【问题标题】：Setting event handlers to DOM objects为 DOM 对象设置事件处理程序
【发布时间】：2013-05-08 01:11:52
【问题描述】：

我一直在寻找最合适的方式来附加 DOM 事件以避免浏览器兼容性问题，并发现 Mozilla developers 网站指出：

旧的方法是像这样分配它：
document.getElementById('cupcakeButton').onclick = getACupcake;
如上所述，事件对象要么是全局对象，要么是参数。这方法可能有问题，不是首选方法，但它仍然有效，很多人仍在使用它。

这是指什么类型的问题？

【问题讨论】：

一方面，如果您尝试将两个处理程序附加到同一元素上的同一事件，则第二个将替换第一个。通常的期望是一个事件可能有许多处理程序。当你结合这两种方法时会发生什么也不是显而易见的。（即“分配”处理程序是否替换了以前“添加”的处理程序？它们都被调用了吗？你能“删除”分配的处理程序吗？我确定所有这些都已指定，但最好只坚持一种方法而不是把它留在你的脑海里。）
我推荐阅读quirksmode.org/js/events_tradmod.html。它也提到了一些问题。

【解决方案1】：

我能想到的最大问题是它不允许分配多个点击处理程序，通过执行另一个.onclick = fn;，如果之前的处理程序存在，您基本上会取消绑定。

即使这很神奇，您也无法取消注册特定的处理程序；要么全有，要么全无。

【讨论】：

【解决方案2】：

已经提到了最明显的一个，it would replace a previously assigned handler。

document.getElementById('id') 应该可以在所有浏览器中运行，除了非常旧的浏览器(Netscape 4-, IE 4-)，你应该分别使用document.layers['id'] 和document.all[id]。

IE 5 up to IE 7have one more issue，也就是说它们还将返回name='id'所在的元素，而不仅仅是id='id'所在的元素。那真的会让你吃不消。

查看jQuery 以了解附加 DOM 事件处理程序以避免浏览器兼容性问题的方法。

【讨论】：