使用 Prototype 将事件侦听器附加到项目集合答案

【问题标题】：Attaching an event listener to a collection of items using Prototype使用 Prototype 将事件侦听器附加到项目集合
【发布时间】：2011-02-02 20:59:00
【问题描述】：

我有一堆输入框，并想为所有输入框附加一个事件侦听器。我的目标是检查父元素（span.genre_checkbox）是否具有“活动”类。如果它没有一个 active 类，则应用它。如果它确实有一个 active 类，请将其删除。

我的代码是这样的

<span class="genre_checkbox"><input type="checkbox" /> All Genres<br /></span>
<span class="genre_checkbox"><input type="checkbox" /> Alternative<br /></span>
<span class="genre_checkbox"><input type="checkbox" /> Blues<br /></span>

等等……

$$('.genre_checkbox input').observe('click', function () {
    if ($(this).up().hasClassName('active') == false ) {
        $(this).up().addClassName('active');
    }
    else {
        $(this).up().removeClassName('active');
    }
});

我得到的错误是：

"$$('.genre_checkbox input').observe 不是函数"

我不确定为什么会出现错误...我需要使用.each() 还是.invoke()？

【问题讨论】：

标签： javascript prototypejs dom-events

【解决方案1】：

您的方向是正确的，$$ 返回一个数组，您需要在每个数组上设置一个观察者。一种简洁的方法是这样的：

$$('.genre_checkbox input').invoke('observe', 'click', function () {
    ...

但是可以通过利用浏览器的event bubbling 来改进它。您将需要所有输入的单个公共父元素：

<div id="genre_options">
    <span class="genre_checkbox"><input type="checkbox" /> All Genres<br /></span>
    <span class="genre_checkbox"><input type="checkbox" /> Alternative<br /></span>
    <span class="genre_checkbox"><input type="checkbox" /> Blues<br /></span>
</div>

那么javascript就更简单了：

$('genre_options').on('click', 'input', function() {
    ...

这里的好处是只添加一个事件，节省时间，只生成一个函数，节省内存。此外，通过它的 ID 而不是通过类名来检索元素会稍微快一点，虽然不是很多，但很高兴知道。

【讨论】：