JavaScript-Event handlers

A function that responds to an event.

1. HTML Event handlers

<input type= "button" value= "click Me" onclick= "alert (' Clicked ')"/>

Or

<input type= "button" value= "click Me" onclick= "showmessage ()"/>

The event object can be accessed directly from the onclick handler, which is the target element of the event. 2. DOM0 Level Event handlers

The traditional way of specifying an event handler via JS assigns a function to an event handler property. This approach is simple and cross-browser, most commonly used.

Specify the event handler:

var btn = document.getElementById ("mybtn");
Btn.onclick = function () {
Alert ("Clicked");
};

Delete whenever you set the value of an event handler property to null: Btn.onclick = NULL; 3. DOM2 Level Event handlers

The DOM2 level event defines two methods, specifying and deleting event handlers: AddEventListener () and RemoveEventListener ().

All DOM nodes contain both methods and accept 3 parameters: event name, event handler function, Boolean value.

The last Boolean value, if True, indicates that the event handler is called during the capture phase, otherwise the event handler is called during the bubbling phase.

The event handlers added here run in the scope of the elements to which they are attached.

This way you can add multiple event handlers and execute them in the order in which they were added.

add a handler for the Click event on the button:

var btn = document.getElementById ("mybtn");
Btn.addeventlistener ("click", Function () {
alert (this.id);
}, False);
Btn.addeventlistener ("click", Function () {
Alert ("Hello world!");
}, False);

To remove an event:

event handlers added through AddEventListener () can only be removed by using RemoveEventListener (), and removing the parameters used is exactly the same as adding the parameters used, so the added anonymous function cannot be removed. 4. IE Event handlers

IE implements two methods similar to those in the DOM: Attachevent () and DetachEvent ().

Both methods receive the same two parameters: event name, event handler.

Event handlers added through Attachevent () are added to the bubbling phase.

Event handlers in this manner will run in the global scope .

Similar to AddEventListener (), attachevent () can also add multiple event handlers for an element. However, these event handlers are executed in the reverse order of the addition .

Add an event handler for the button:

var btn = document.getElementById ("mybtn");
Btn.attachevent ("onclick", function () {//This is the onclick rather than the click
Alert ("Clicked");
});

With regard to the removal of events, the same parameters must be provided for DetachEvent () attachevent (), and anonymous functions cannot be removed. 5. Cross-browser event handlers

varEventutil ={addHandler:function(element, type, handler) {if(Element.addeventlistener) {Element.addeventlistener (type, handler,false); } Else if(element.attachevent) {element.attachevent ("On" +type, handler); } Else{element["On" + type] =handler; }}, RemoveHandler:function(element, type, handler) {if(Element.removeeventlistener) {Element.removeeventlistener (type, handler,false); } Else if(element.detachevent) {element.detachevent ("On" +type, handler); } Else{element["On" + type] =NULL; }    }};

JavaScript-Event handlers