JS Event Cross-browser problem-solving study and summary

Defines a Eventutil object var eventutil = { //compatible browser register event handler Addhandler: function (element,  Type, handler) { //  The method accepts 3 parameters: the element to manipulate, the event name and the event handler function  if  (Element.addeventlistener) {  //checks if an incoming element exists DOM2-level method  element.addeventlistener (Type, handler, false); //  if present, Then use this method  } else if  (element.addevent) { //  If there is an IE method  element.attachevent ("on  + type, handler);  //uses IE, note that the event type here must be prefixed with "on".  } else { //  the last possibility is to use DOM0 level  element["on"  + type] = hander;  } }, //compatible browser cancellation event handler removehandler: function (Element, type, handler) { //   The method is to delete the previously added event handler  if  (element.removeeventlistener) { //Check if an incoming element exists DOM2-level method   Element.removeeventlistener (Type, handler, false); //  If present, use this method  } else if   (element.detachevent) { //  If there is a method of IE  element.detachEvent ("on"  + type, handler);  //uses the IE method, note that the events type here must be prefixed with "on".  } else { //  the last possibility is to use DOM0 and methods (in modern browsers, the code here should not be executed)  element["on"  + type ] = null; } },//compatible browser Gets the browser event object's program Getevent:function (event)  {return event?event: window.event;},//compatible browser Gets the event from which element of the program Getelement:function (event) {return event.target| | event.srcelement;},//compatible browser block event default behavior preventdefault:function (event) {    if ( Event.preventdefault) {    event.preventdefault ();    }else{     event.returnvalue=false;    }},//compatible browser block event bubbling Behavior stoppropagation:function ( Event) {if (event.stoppropagation) {event.stoppropagation ();} Else{event.cancelbubble=true;}}} The following is a simple use of the above encapsulated object Window.onload=function () {var htmlobj = document.documentelement;var  Bodyobj = document.body;var alinkobj=document.getelementbyid (' ALink ');  Eventutil.addhandler (Bodyobj, ' click ', function () {alert ("I am the BODY Element");});          eventutil.addhandler (alinkobj, ' click ', function () {alert (" I am the ALink element ");});          eventutil.addhandler (alinkobj, ' click ', Function (e) {e= event| | Window.event;  alert (Eventutil.getelement (e));});          eventutil.addhandler (alinkobj, ' click ', Function (e) {e= event| | Window.event;  alert (E.type);});          eventutil.addhandler (alinkobj, ' click ', Function (e) {e= event| | Window.event; eventutil.preventdefault (e);  });         Eventutil.addhandler (alinkobj, ' click ', Function (e) {e=event| | Window.event;   eventutil.stoppropagation (e);  });

(1) Event objects in the DOM

Common Properties:

Type: Represents the types of events

Target: represents the actual target of the event

Currenttarget: The element whose event handler is currently processing the event.

Important Attribute methods:

Stoppropagation () block event bubbling

Preventdefault () default behavior for blocking events

(2) Event object in IE

Common Properties:

The Type property represents the types of events

The Srcelement property represents the actual target of the Get event (similar to the target in the DOM )

false, means not to block bubbling ,true ( and stoppropagation ()   )

The returnvalue property is used to block the behavior of the default event, and the default value is true, which is set to false to cancel the default behavior of the event (with DOM Preventdefault () method in the same way).

JS Event Cross-browser problem-solving study and summary