How to Add Event Handlers?

Q

How to Add Event Handlers?

✍: Guest

A

You can add an event handler in the HTML definition of the element like this:
<script type="text/javascript"><!--
function hitme() {
alert("I've been hit!");
}
// -->
</script>
<input type="button" id="hitme" name="hitme" value="hit me" onclick="hitme()"

Or, interestingly enough you can just assign the event's name on the object directly with a reference to the method you want to assign.

<input type="button" id="hitme2" name="hitme2" value="hit me2"/>
<script type="text/javascript"><!--
function hitme2() {
alert("I've been hit too!");
}
document.getElementById("hitme2").onclick = hitme2;
// -->
</script>

You can also use an anonymous method like this:

document.getElementById("hitme3").onclick = function () { alert("howdy!"); }

You can also use the the W3C addEvventListener() method, but it does not work in IE yet:

<input type="button" id="hitme4" name="hitme4" value="hit me4"/>
<script type="text/javascript"><!--
function hitme4() {
alert("I've been hit four!");
}
if(document.getElementById("hitme4").addEventListener) {
document.getElementById("hitme4").addEventListener("click", hitme4, false);
}
// -->
</script>

2011-05-24, 3709👍, 0💬