javascript - 使用 Prototype 将事件监听器附加到项目集合

Question

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

我的代码是这样的

<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 is not a function"

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

Answer 1

你正朝着正确的方向前进，$$ 返回一个数组，你需要在每个数组上设置一个观察者。一种巧妙的方法是这样的:

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

但是可以通过利用浏览器的 event bubbling 来改进它.您将需要所有输入的一个公共(public)父元素:

<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 而不是通过类名检索元素的速度要快一些，虽然快不了多少，但很高兴知道这一点。