JavaScript 给类名添加事件

Question

如果我有10个带有类名 keyword 的项目：

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

我该如何在这个元素上绑定一个事件，比如click？

我尝试了下面的代码，但没有成功（没有弹出警告）：

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

要求：

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

注：这些元素不是在页面加载时生成的。它们的数量可能不同，每次单击按钮时都会发生变化。

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

- Novak

---

很抱歉，你必须自己完成jQuery的工作。 - user1086498

像这样的东西，jQuery或任何其他库都是您应该考虑的。为什么要重新发明轮子呢？ - ThiefMaster

为什么要重新发明轮子？为什么不用更小的代码库来完成相对简单的任务呢？ - user1106925

Answer 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上了解更多关于事件委托的内容。据我所知，这是实现你正在尝试实现的功能的最佳方法。这也是所有主要库（prototype、jQuery等）在幕后工作的方式。

更新：

这里是fiddle，其中包含一些更详细的说明。一个有趣的参考是这个页面。它帮助我理解IE和W3C事件的差异，关键是它帮助我理解了事件委托的价值和无数的好处。

- Elias Van Ootegem

---

主要的库不是这样在后台运作的。你在哪里看到的？ - Florian Margaine

这是一个不错的方法，但是即使它们没有类，这是否会触发所有元素上的事件？ - Joseph Marikle

在 jQuery 的源代码中，例如。当然这不是实际的代码，但本质上，它们是如何工作的。检查 jQuery 源代码！ - Elias Van Ootegem

@JosephMarikle：无论是否有指定的处理程序，事件总是会被触发。所有这个做的就是“监听”这些事件何时被触发。你唯一需要检查的是被点击的元素是否有特定的类。如果有，你可以相应地处理事件。老实说，这是最高效的方法。 - Elias Van Ootegem

@Guy David，我会在jsFiddle上设置一个示例。也许你可以fork它并告诉我哪里出了问题。 - Elias Van Ootegem