JavaScript-Event handlers

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.