10

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

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

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

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

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

要求：

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

注意：页面加载时不会生成元素。它们的数量可以不同，每次您单击一个按钮时，例如。

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

4

1 回答 1

18

您应该委托该事件。尝试这个：

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、...）在幕后工作的方式

更新：

这是小提琴，它包含更多解释。一个有趣的参考是这个页面。它帮助我理解了 IE 和 W3C 事件的不同之处，而且至关重要的是，它帮助我理解了事件委托的价值和无数好处

于 2012-06-30T11:42:45.717 回答