使用原型进行事件冒泡答案

【问题标题】：Event Bubbling with Prototype使用原型进行事件冒泡
【发布时间】：2011-01-23 08:33:09
【问题描述】：

我编写了一个新闻滚动器，它使用 Prototype 和 Script.aculo.us 库以设定的时间间隔滚动浏览新闻提要。每个新闻项目中都包含一些按钮，允许用户手动向上或向下滚动新闻提要。加载页面时，会为按钮分配事件处理程序，以便在单击时处理它们：

$$('img.up').each(function(img) {
    img.observe('click', function(e) {
        window.clearTimeout(timeout);
        timeout = scrollTicker(-block_size, 2);
    });
});
$$('img.down').each(function(img) {
    img.observe('click', function(e) {
        window.clearTimeout(timeout);
        timeout = scrollTicker(block_size, 2);
    });
});

这很好用。我遇到的问题是，当新的新闻项目被动态附加到现有新闻项目的末尾时，它们没有附加事件处理程序。

从我读到的内容看来，使用事件冒泡似乎是一种更好的处理方法。这样我就不需要将事件处理程序附加到每个单独的按钮。不幸的是，我无法找到如何使用 Prototype 正确执行此操作。 Prototype 是如何进行事件冒泡的？

（我没有可用的一个选项是从每个新闻项目中删除按钮并为所有这些按钮使用一组按钮，因为我在分配的空间中没有足够的空间来这样做。）

【问题讨论】：

标签： javascript prototypejs dom-events

【解决方案1】：

事件冒泡允许您观察容器上的事件，而不是容器内的单个元素。

在 Prototype 中是这样的：

$('records').observe('click', function(event) {
  var clickedRow;
  clickedRow = event.findElement('tr');
  if (clickedRow) {
    this.down('th').update("You clicked record #" + clickedRow.readAttribute("data-recnum"));
  }
});

注意本示例中使用的观察者和 findElement。

完整参考请参见http://api.prototypejs.org/dom/event.html。

【讨论】：

【解决方案2】：

当创建新行时，使用 new Element() 然后将行为附加到它上面。最后，将其插入 DOM。

var row = new Element('div', { 'class': 'row').update('<span>row</span>');
row.observe('click', function(e) {
    window.clearTimeout(timeout);
    timeout = scrollTicker(block_size, 2);
});
$('newsFeedGrid').insert(row);

【讨论】：