Javascript event detection

Question

I can't find any good documentation on this suprisingly so I'm posting it here.

What's the raw javascript equivilent to this:

$(elem).click(function(){
    alert(this.text());
});

All I can find is this <elem onlick="func()" /> which is not what I want, I want to be able to do it just with javascript not within the context of an element.

Answer 1

You can do object.onclick = handler

var el = document.getElementById('elem');
elem.onclick = function(){ alert("Clicked!") };

That should work - i'm a bit ropey on javascript nowadays!

Answer 2

Maybe you need something like that:

document.getElementById('element_id').setAttribute("onclick","alert('hello world')");

Answer 3

Assuming elem is an element node (if not, you'll need to work your selector into use of getElementById or whatever):

elem.onclick= function() {
    var text= 'textContent' in elem? elem.textContent : elem.innerText;
    alert(text);
};

textContent is the standards-compliant way of getting text from an element; innerText is the IE way. (There are a few differences, but hopefully nothing that will affect you.) If you need to support old/obscure browsers that have neither you would have to do an tedious tree-walk to pick up all text (this is what jQuery's text() does.)

(I'm assuming that's what you want from this.text(). That wouldn't actually work — presumably you meant $(this).text().)

Answer 4

There are several ways to attach a click handler without using a library. The first is assigning a function to the on[eventname] property of an element:

element.onclick = function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}

You can also assign a string of code to be evaluated but it's not as pretty and generally avoided. Another way is to use the w3c standard addEventListener:

element.addEventListener("click", function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}, false);

This is not supported by current versions of IE which require attachEvent instead:

element.attachEvent("onclick", function () { 
    alert(event.srcElement.innerText); 
});

IE has problems applying the function to the element that fired the event, so this will not correctly point to that element with attachEvent.

The first method element.onclick is useful for x-browser compatibility and quick coding, but you can only assign a single function to the property. Using attachEvent and addEventListener you can attach as many functions as you like and they will all fire correctly. You can create a cross browser semi-equivalent doing simple functionality checks in your code:

if ("addEventListener" in element)
    element.addEventListener("click", function (eventObj) { 
        alert("textContent" in this ? this.textContent : this.innerText) 
    }, false);
else
    element.attachEvent("onclick", function () { 
        alert(event.srcElement.innerText); 
    });