the example below, an alert dialog box with the message "Hey Joe" appears after the hyperlink is clicked. The default click action is cancelled by returning false in the event handler. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inline Event Handling</title> </head> <body> <h1>Inline Event Handling</h1> <p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p> <script> function triggerAlert(name) { window.alert("Hey " + name); } </script> </body> </html> One common misconception with the inline model is the belief that it allows the registration of event handlers with custom arguments, e.g. name in the triggerAlert function. While it may seem like that is the case in the example above, what is really happening is that the JavaScript engine of the browser creates an anonymous function containing the statements in the onclick attribute. The onclick handler of the element would be bound to the following anonymous function: function () { triggerAlert('Joe'); return false; } This limitation of the JavaScript event model is usually overcome by assigning attributes to the function object of the event handler or by using closures. Traditional model In the traditional model, event handlers can be added or removed by scripts. Like the inline model, each event can only have one event handler registered. The event is added by assigning the handler name to the event property of the element object. To remove an event handler, simply set the property to null: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Traditional Event Handling</title> </head> <body> <h1>Traditional Event Handling</h1> <p>Hey Joe!</p> <script> var triggerAlert = function () { window.alert("Hey Joe"); }; // Assign an event handler document.onclick = triggerAlert; // Assign another event handler window.onload = triggerAlert; // Remove the event handler that was just assigned window.onload = null; </script> </body> </html> To add parameters: var name = 'Joe'; document.onclick = (function (name) { return function () { alert('Hey ' + name + '!'); }; }(name)); Inner functions preserve their scope. DOM Level 2 The W3C designed a more flexible event handling model in DOM Level 2. Some useful things to know : To prevent an event from bubbling, developers must call the stopPropagation() method of the event object. To prevent the default action of the event to be called, developers must call the preventDefault() method of the event object. The main difference from the traditional model is that multiple event handlers can be registered for the same event. The useCapture option can also be