带原型的事件冒泡

2010-03-03 72 views 2 likes

我写了一个新闻滚动器，它使用Prototype和Script.aculo.us库以设定的时间间隔滚动浏览新闻馈送。每个新闻项目中都有按钮，可以让用户手动向上或向下滚动新闻Feed。当页面被加载时，按钮被分配事件处理程序，当它们被点击时：带原型的事件冒泡

$$('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如何进行事件冒泡？

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

来源

2010-03-03 John Conde

回答

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

它看起来像这样的原型：

$('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以供参考。

来源

2010-03-03 18:45:30

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

来源

2010-03-03 23:58:51 Minimul

带原型的事件冒泡

回答

相关问题