Javascript将事件附加到类名答案

【问题标题】：Javascript attach event to class nameJavascript将事件附加到类名
【发布时间】：2012-06-30 11:38:17
【问题描述】：

如果我有 10 个项目，类名称为 keyword：

<div class="keyword"></div>

如何在此元素上附加事件，例如 click。

我尝试了以下，但没有运气：（没有警报出现）

document.getElementsByClassName('.keyword').onclick = function()
{
    alert(true);
    Search.addKey(this.getElementsByClassName('name')[0].innerHTML);
}

要求：

没有 onclick 属性
没有 jQuery 或任何其他库

注意：页面加载时不会生成元素。他们的数字可以不同，每次你点击一个按钮，例如。

我需要一种方法在“未来”中附加到所有带有“关键字”类的标签。

【问题讨论】：

难，你得做jquery的工作。
对于像 jQuery 或任何其他库这样的东西正是您应该考虑的。为什么要重新发明轮子？
@ThiefMaster：为什么要重新发明轮子？ 为什么要加载一个大型库来执行相当简单的任务？

标签： javascript

【解决方案1】：

您应该委托该活动。试试这个：

if (document.body.addEventListener)
{
    document.body.addEventListener('click',yourHandler,false);
}
else
{
    document.body.attachEvent('onclick',yourHandler);//for IE
}

function yourHandler(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/keyword/))
    {
        //an element with the keyword Class was clicked
    }
}

您可以在 quirksmode.com 上阅读有关事件委托的更多信息。 AFAIK，这是实现您想要实现的目标的最佳方式。这就是所有主要库（原型、jQuery、...）在幕后工作的方式

更新：

Here's the fiddle，它包含更多解释。一个有趣的参考是this page。它帮助我理解了 IE 和 W3C 事件的不同之处，而且至关重要的是，它帮助我理解了事件委托的价值和无数好处

【讨论】：

主要库在幕后不是这样工作的。你在哪里见过这个？
这是一个不错的方法，但是即使它们没有类，这不会触发所有元素的事件吗？
Erm，例如在 jquery 源中。当然，这不是实际的代码，但本质上，它们就是这样工作的。检查 jquery 源代码！
@JosephMarikle：无论有没有指定的处理程序，事件总是被触发。所有这一切都是“听”这些事件何时被触发。你唯一检查的是被点击的元素是否有特定的类。如果是这样，您可以相应地处理该事件。老实说，这是最高效的方法
不错！我将不得不使用它一段时间。