使用事件委托观察具有特定类的元素或该元素的子元素的事件答案

【问题标题】：Observing events for elements with a certain class or that element's children using event delegation使用事件委托观察具有特定类的元素或该元素的子元素的事件
【发布时间】：2009-08-14 07:27:39
【问题描述】：

我有一个页面与此类似：

<div id='things'>
    <div class='thing'>
        <div class='activator'>
            <span>Some text</span>
        </div>
    </div>
</div>

代码类似这样：

$('things').observe(click, function(event) {
    var e = event.element();
    if (e.match('.activator')) {
        doSomeStuffWith(e);
    } else if (e.match('.activator *')) {
        doSomeStuffWith(e.up('.activator');
    }
});

因此，如果我单击 .activator 或其任何子元素，我想在 .activator 上调用一个函数，我只是想知道是否没有某种方法可以组合这两个 if 子句。像 if (e.match('.class, .class *') { doStuff(e.upOrSelf('activator')); }

我想我可以使用 upOrSelf 方法扩展 Element。但如果可能的话，我宁愿不做任何非标准的定制。

【问题讨论】：

标签： javascript prototypejs event-delegation

【解决方案1】：

请参阅here，了解有关在 Prototype 中进行事件委托的更通用方法的讨论。在页面下方有一个implementation 的Event.delegate() 使用一个小技巧来实现你想要的。它收集目标元素及其祖先，并使用Selector.matchElements 将事件侦听器应用于所有匹配元素。

比这复杂一点，但这里有一个缩写版本（未经测试）：

$('things').observe('click', function(event) {
    var child = event.element();
    var ancestors = [child].concat(child.ancestors());
    Selector.matchElements(ancestors, '.activator').each(function(element) {
       doSomeStuffWith(element);
    });
})

【讨论】：