There are four ways of registering event handlers with events:
1.) Inline registration- The oldest browsers support only one way of registering event handlers, the way invented by Netscape.
In the inline event registration model, event handlers are added as attributes to the HTML elements they were working on, like:
1.) Inline registration- The oldest browsers support only one way of registering event handlers, the way invented by Netscape.
In the inline event registration model, event handlers are added as attributes to the HTML elements they were working on, like:
<a href=”somewhere.html”onClick=”alert(‘I\’ve been clicked!’);”>
When a click event takes place on the link, the event handler is invoked and executes the script: an alert is shown. You can also invoke a JavaScript function:
<a href=”somewhere.html”onClick=”doSomething();”>
2.) Traditional event registration model- the onclick, onmouseover and all other event properties of the HTML element are completely accessible through JavaScript.
Now our example function doSomething() is registered to the onclick property of element and is therefore executed whenever the user clicks on the element. Note that the event name must be all lower case.
Now our example function doSomething() is registered to the onclick property of element and is therefore executed whenever the user clicks on the element. Note that the event name must be all lower case.
element.onclick = doSomething;
To remove the event handler, simply make the onclick method empty:
element.onclick =null;
Important: In the registration of an event handler you do not use parentheses(). The onclick method expects to be assigned an entire function. If you’d do
element.onclick = doSomething();
the function would be executed and its result would be registered to onclick.
Instead we copy the function doSomething() to the event handler in its entirety. We do not execute it yet, that should only happen when the event actually takes place.
3.) Using addEventListener() method: This method receives three parameters,
first parameter : event name (such as: click, load, mouseout, etc.),
second parameter: function that handle it, and
third parameter : boolean values (true for event capturing or false for event
bubbling).
4.)IE Binding: using attachEvent() method : This methods receives two parameters,
first parameter: event precede with ‘on’ word (such as: onclick, onload, onmouseout),
second parameter: function that handle it.
Instead we copy the function doSomething() to the event handler in its entirety. We do not execute it yet, that should only happen when the event actually takes place.
3.) Using addEventListener() method: This method receives three parameters,
first parameter : event name (such as: click, load, mouseout, etc.),
second parameter: function that handle it, and
third parameter : boolean values (true for event capturing or false for event
bubbling).
4.)IE Binding: using attachEvent() method : This methods receives two parameters,
first parameter: event precede with ‘on’ word (such as: onclick, onload, onmouseout),
second parameter: function that handle it.