Table of Contents
How to Set Event Handler Properties in JavaScript
The simplest way to register an event handler is by setting a property of the event target to the desired event handler function. In this method, event handler properties have names that consist of the word “on” followed by the event name like onclick, onchange, onload, onmouseover etc.
Example:
For example, here are the JavaScript and HTML codes for setting event handler properties using simple event handler properties followed by event name onclick.
JavaScript Code:
<script>
var a=document.getElementById("button1")
a.onclick=handler1;
function handler1() {
alert("Thanks for clicking me!");
}
</script>
HTML Code:
<button id="button1">Click me</button>
Preview:
How to Set Event Handler Attributes in HTML
Also Read: How To Handle Document Load Events in JavaScript
Example:
For example, here are the JavaScript and HTML codes for setting event handler attributes in HTML where the HTML event handler attribute contains JavaScript statements.
HTML Code:
<button onclick="alert('Thank you for clicking me');">Click Here</button>
Preview:
Since an HTML event handler attribute contains multiple JavaScript statements, you must remember to separate those statements with semicolons or to break the attribute value across multiple lines.
How to Set Event Handler by Method Invocation
There are two methods to handle event registration by method invocation, first is addEventListner(), which is supported by all browsers except IE8 and before and the second method is attachEvent() which supports for all versions of IE before IE9.
Using addEventListner()
The addEventListner() takes three arguments, the first is the event type for which the handler is being registered. The event type or name is a string and it should not include the “on” prefix that is used when setting event handler properties. The second argument to addEventListner() is the function that should be invoked when the specified type of event occurs. The final argument to addEventListner() is a Boolean value.
Example:
For example, the JavaScript and HTML codes below register the handler for the click event on a <button> element which displays the message on onclick event.
JavaScript Code:
<script>
var b=document.getElementById("button2")
b.addEventListener("click", handler2);
function handler2() {
alert("Thanks for clicking me!");
}
</script>
HTML Code:
<button id="button2">Click me</button>
Preview:
Using attachEvent()
Example:
Here is an example to show the uses of addEventListner() and attachEvent(), where addEventListner() is used for all browsers if it supports otherwise uses attachEvent().
JavaScript Code:
<script>
var d=document.getElementById("button3")
if (d.addEventListener) {
d.addEventListener("click", handler3);
} else if (d.attachEvent) {
d.attachEvent("onclick", handler3);
}
function handler3() {
alert("Hello World!");
}
</script>
HTML Code:
<button id="button3">Click me</button>
Preview:
Read Next: How To Cancel Event Handlers in JavaScript
Comments are closed.