Javascript присоединяет событие к имени класса

Если у меня есть 10 элементов, с именем класса keyword:

<div class="keyword"></div>

Как я могу связать событие, например click, с этим элементом.

Я попробовал следующее, но не повезло: (предупреждение не появляется)

document.getElementsByClassName('.keyword').onclick = function()
{
    alert(true);
    Search.addKey(this.getElementsByClassName('name')[0].innerHTML);
}

Требования:

  • Без атрибута onclick
  • no jQuery или любая другая библиотека

Примечание: элементы не генерируются при загрузке страницы. Их число может быть различным, каждый раз, когда вы нажимаете кнопку, например.

Мне нужен способ привязки ко всем тегам с ключевым словом класса в "будущем".

Ответы

Ответ 1

Вы должны делегировать событие. Попробуйте следующее:

if (document.body.addEventListener)
{
    document.body.addEventListener('click',yourHandler,false);
}
else
{
    document.body.attachEvent('onclick',yourHandler);//for IE
}

function yourHandler(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/keyword/))
    {
        //an element with the keyword Class was clicked
    }
}

Подробнее о делегировании событий вы можете узнать на quirksmode.com. AFAIK, это лучший способ добиться того, чего вы пытаетесь достичь. Вот как все основные библиотеки (прототип, jQuery,...) работают за кулисами

Обновление

Здесь скрипка, в ней есть еще несколько объяснений. Интересной ссылкой является эта страница. Это помогло мне понять, как различаются события IE и W3C, и, что важно, это помогло мне понять ценность и бесчисленные преимущества делегирования событий.