Javascript event processing

1. register an event

There are two methods: one is to set the attribute for the event target object or text element, the simplest way is to set the target attribute as the required event handler function, the name of the event handler attribute is composed of on events, such as onclick, onchange, onload, and onmouseover. the following programs:

// Call after the file is loaded

Window. onload = function (){

Var elt = document. getElementById ("address ");

// Called before form submission

Elt. onsubmit = function () {return validate (this );}

}

You can also register an event by setting the event handler attributes of the document element, for example;

Click here

The other method is to pass the event handler to an object or element. In all browsers except for earlier versions of IE8, addEventListener is supported and three parameters are received, the first registers the event type of the handler, which is a string and should not contain the 'on' prefix used to set the event handler, and the second is the called function, the third is a boolean type. Generally, it is false, indicating event bubbling. If it is true, no. This method is unknown in IE. The sample code is as follows:

<Scriptlanguage = "javascript">

Window. onload = function (){

Var B = document. getElementById ("mybutton ");

B. onclick = function () {alert ("click me ");};

B. addEventListener ("click", function () {alert ("clickagain") ;}, false );

}

</Script>

Click me

You can use the removeEventListener () method to delete an event, for example:

Document. removeEventListener ("mouseup", handleMouseUp, true );

In IE5 and later versions, similar methods such as attachEvent and detachEvent () are defined. The working principle is similar to addEventListener (). This function has only two parameters, similar to the first two parameters of addEventListener,

The first parameter uses the prefix event handler property with "on. The same event can be registered multiple times.

Window. onload = function (){

Var B = document. getElementById ("mybutton ");

Var handler = function () {alert ("thanks ");};

If (B. addEventListener) B. addEventListener ("click", handler );

Elseif (B. attachEvent) B. attachEvent ("onclick", handler );

}

We can further encapsulate

FunctionaddEvent (el, type, fn ){

If (el. addEventListener)

El. addEventListener (type, fn, false );

Else

El. attachEvent ('on' + type, fn );

}

Add an event to the tool function.

Functon handler (){

Alert (this );

Alert (arguments [0]);

}

In Firefox and other standard browsers, click the page and "[object HTMLDocument]" will pop up, and this in handler is the document itself. However, in IE6/7/8, this is a window object. This is unpleasant. The modification should be consistent with the standard browser.

Function addEvent (el, type, fn ){

If (el. addEventListener ){

El. addEventListener (type, fn, false );

} Else {

El ['E' + fn] = function (){

Fn. call (el, window. event );

}

El. attachEvent ('on' + type, el ['E' + fn]);

}

}

Encapsulate deletion events into objects

E = {

Add: function (el, type, fn ){

If (el. addEventListener ){

El. addEventListener (type, fn, false );

} Else {

El ['E' + fn] = function (){

Fn. call (el, window. event );

}

El. attachEvent ('on' + type, el ['E' + fn]);

}

},

Remove: function (el, type, fn ){

If (el. removeEventListener (type, fn, false ))

El. removeEventListener (type, fn, false );

Else if (el. detachEvent)

El. detachEvent ('on' + type, el ['E' + fn]);

}

}