Event handlers in the JAVASCIRPT

Event processing in JS is a finishing touches, JS event processing program makes JS become the Web page interaction layer of the first place. So, there are several event handlers in JS?

1.dom0 Level Event handlers

The traditional way to specify an event handler via JS is to add a function to an object's event handler. This approach is used by all modern browsers. Reason one is convenient and simple, the second is that it can be implemented across browsers.

1     var oA = document.getElementsByTagName ("a") [0]; 2         function () {3             alert (this. id); 4 5     }    

We get a reference to a tag with a Doucment object, and then add the onclick event to the reference, but one thing to note is that the code that adds the event does not specify an event handler if it is not executed, so The code follows the a tag in the page.

The Delete event handler can pass a null reference:

1 null;

2.dom2 Level Event handlers

Two methods are defined in "DOM2-level events" to add or remove event handlers:

1.addEventListener ();

2.removeEventListener ();

The parameters of the two methods are the same, the first is the type of event to be added, the second is the function name of the event handler (if you are using an anonymous function, you cannot remove it), and the third is a Boolean value, and true means that the event handler is added during the event capture period. False indicates that the event handler was added during event bubbling, usually with false. compatibility, Ie9+,firefox,safari,chrome, and opera support DOM2 level event handlers.

1Oa.addeventlistener ("Click", Handle,false);2Ob.addeventlistener ("Click", Handle,false);3 4VarHandle=function(){5Alert This. ID);6     }7     8Oa.removeeventlistener ("Click", Handle,false);9Ob.removeeventlistener ("Click", Handle,false);

In this code, the OA and OB objects are added to the click event, at run time, will pop up the ID of the OA, then the ID of the OB, the two event handlers will be executed in their own order . Note that here is the Click event, No on

3.IE Event handlers

In IE, the real West is now similar to the DOM in two ways:

1.attachEvent ();

2.detachEvent ();

The two methods accept the same arguments, the first one is the event name, and the second is the event handler function, which, by default, adds an event handler in event bubbling.

 1  oa.attachevent ("onclick" ,handle");  2  ob.attachevent ("onclick" ,handle);  3  4  var < Span style= "COLOR: #000000" >handle   = function   () { 5  alert (this  .id);  6  }  7  8  oa.detachevent ("onclick" ,handle);  9  ob.detachevent ("onclick", handle);  

Here are a few things to consider when using these two functions:

1. The first parameter is with on, which is the onclick, which differs from the two methods of the DOM2 level.

2. The scope is different, here this, different from the scope of the DOM0 level. The event handlers in IE run under the global scope, meaning that this does not represent the object added by the event, but rather always represents the Window object.

3. The order is also different from the DOM method, where the second sentence is executed first, and then the first sentence is executed, and the order in the DOM2 level is reversed and is executed in turn.

4. Similarly, anonymous functions cannot remove events, preferably with a named function.

Currently browsers that support IE event handlers have IE and opera.

• DOM0 Level Event handlers
• DOM2 Level Event handlers
• IE Event handlers

Event handlers in the JAVASCIRPT