There are different ways you can bind an event handler to a JavaScript Event. The first is the traditional way of using the HTML attribute on<event> = “handler”.

eg:

<a href=”somewhere.html” onclick=”myfunction” onmouseover=”myhoverhandler” >Click here</a>

and the JavaScript code would be

<script type=”text/javascript”> function myfunction() { /* JavaScript Code here */ } </script>

The second way of binding the events would be assigning the DOM object directly using javascript as

var myElement = document.getElementById(“myId”); // OR any other method of selecting the DOM.

//assigning the event handler

myElement.on<event> = handlerFunction;

Examples:

myElement.onclick = function() { }

myElement.onmouseover = myFunction;

where myfunction can be defined as

function myfunction() { }

( OR )

myFunction = function () { }

NOTE : Never Use

myElement.onclick = alert(“hi”);

It is not good to use the above way. In the next post I’ll discuss about the next way of binding.