Question

我编写了一个新闻滚动条，它使用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完成事件冒泡？

（我无法使用的一个选项是从每个新闻项中删除按钮，并为所有这些按钮使用一组按钮，因为我在分配的空间中没有足够的空间来执行此操作。）

Answer 1

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

在原型中看起来像这样：

$('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以获取完整参考资料。

Answer 2

创建新行时，使用新的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);

事件冒泡与原型

2 个答案: