CODEWITHSUNDEEP
javascript
Novak
Novak

Reputation: 2768

Javascript attach event to class name

If I have 10 items, with the class name keyword:

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

How can I attach an event, for example click, on this element.

I tried the following, but with no luck: (no alert comes up)

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

Requirements:

Note: the elements are not generated on page load. Their number can be different, each times you click a button for eg.

I need a way to attach to all tags with the class 'keyword' in the 'future'.

Upvotes: 10

Views: 13618

Answers (1)

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

You should delegate the event. Try this:

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
    }
}

You can read more on event delegation on quirksmode.com. AFAIK, this is the best way of achieving what you're trying to achieve. This is how all the major libs (prototype, jQuery, ...) work behind the scenes

Update:

Here's the fiddle, it contains some more explanation. An interesting reference is this page. It helped me understand the way IE and W3C events differ and, crucialy, it helped me understand the value, and countless benefits of Event Delegation

Upvotes: 18

Related Questions