JavaScript AddEventByAttributeValue

Introduction

I have used this function countless times over the years. It was designed to be a fast/lightweight/cross browser way to assign functions to the events of any element on the page matching a specific criteria. It also works with expando attributes (custom attributes assigned at runtime).

The Function

function AddEventByAttributeValue(t/*tagName*/, p/*propery*/, v/*value*/, e/*event*/, f/*function*/)
{
    var n = document.getElementsByTagName(t);
    for (var i=0, l=n.length; i<l; i++)
    {
        if (n[i][p] == v) { n[i][e] = f; }
    }
}

Using the Code

You can use the code in the following way:

AddEventByAttributeValue("a", "className", "lightbox", "onclick", function (e) {
    e = e || event;
    if (this.href.lastIndexOf(".jpg") == this.href.length - 4) {
        alert("this is an image link");
    }
    e.cancelBubble = true;
    e.returnValue = false;
    return false;
});

or alternatively:

function lightboxImageClick(e) 
{
    e = e || event;
    if (this.href.lastIndexOf(".jpg") == this.href.length - 4) {
        alert("this is an image link");
    }
    e.cancelBubble = true;
    e.returnValue = false;
    return false;
}
AddEventByAttributeValue("a", "className", "lightbox", "onclick", lightboxImageClick);

to affect all element types where an attribute exists and value equals, use an astrix * as the tagName.

AddEventByAttributeValue("*", "className", "lightbox", "onclick", lightboxImageClick);

Points of Interest

This function is aimed at projects that do not require bloated JavaScript frameworks. It does not provide a method to remove events, although this could be added if required.