Событие с прототипом - PullRequest
Новая
       8

Событие с прототипом

2 голосов
/ 03 марта 2010

Я написал скроллер новостей, который использует библиотеки 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?

(Один из вариантов, который мне не доступен, состоит в том, чтобы удалить кнопки из каждого новостного элемента и использовать один набор кнопок для всех из них, поскольку мне не хватает места в выделенном для этого месте.)

Ответы [ 2 ]

2 голосов
/ 03 марта 2010

Пузырьки событий позволяют вам наблюдать событие в контейнере, а не отдельные элементы внутри контейнера.

В 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 для полной справки.

0 голосов
/ 04 марта 2010

При создании новой строки используйте 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);
...