JavaScript event mechanism compatible with "detailed collation" _ Basics

"Add event mechanism" AddEventListener and attachevent

[The consortium]

AddEventListener (' click ', function () {alert (' Hello World ')}, FALSE)//W3C specification add event (IE8 and above incompatible); The first parameter is the event type, the second is the event program, and the third F Alse for event bubbling, true for event capture

[IE]

Attachevent (' onclick ', function () {alert (' Hello World ')}//ie add event; The first parameter is the event type (needs to be added on); The second is the event program, because IE only supports event bubbling, so there are only two parameters

[Cross-browser compatible]

function Insertevent (obj,event,fun) {

if (obj.addevenlistener) {

 Addeventlitener (event,fun,false)

} else if (Obj.attach) {

attachevent (' on ' +event,fun)

}

}

"Delete event mechanism" RemoveEventListener detachevent

[The consortium] RemoveEventListener

RemoveEventListener ()///Use AddEventListener new events can only be deleted by RemoveEventListener;

[note]//The following way of deleting events is incorrect because the event program must not be an anonymous function

AddEventListener (' click ', function () {alert (' Hello World ')}, False)

RemoveEventListener (' click ', function () {alert (' Hello World ')},false)

Solution

AddEventListener (' Click ', box, false);

RemoveEventListener (' click ', Box,false);

function box () {

alert (' Hello world ');

}

[Cross-browser compatible]

function Deleteevent (obj,event,fun) {

if (obj.removeeventlistener) {

RemoveEventListener (event,fun,false　　);

}else if (obj.detachevent) {

detachevent (' on ' +event,fun)

}

}

"Block default behavior for specific events"

[Preventdefault and ReturnValue]

[The consortium] Preventdefault

[IE] Reutrnvalue

[Cross-browser compatible]

function (event) {

Event=event | | window.event;

if (event.preventdefault) {

event.preventdefault ()

}else{

event.returnvalue=false;

}

}

"Get target Object"

[Target and Srcelement]

function (event) {

Event=event | | window.event;

if (event.target) {return

event.target;

}else if (event.srcelement) {return

event.srcelement;

}

 

}

The above JavaScript event mechanism compatible with "detailed collation" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.