JavaScript event handling sample sharing _javascript Tips

Cut the crap, just give me the sample code:

Copy Code code as follows:

<script type= "Text/javascript" >
function Eventutil () {
var _self = this;
Adding events
var addevent = (function () {
if (Document.addeventlistener) {
return function (EL, type, fn) {
El.addeventlistener (Type, FN, false);
}
} else {
return function (EL, type, fn) {
El.attachevent ("On" + Type, function () {
Return Fn.call (el, window.event);
});
}
}
})();
Add Property Change Event
var addpropertychangeevent = function (obj, fn) {
if (window. ActiveXObject) {
Obj.onpropertychange = fn;
} else {
Obj.addeventlistener ("Input", FN, false);
}
}
removing events
var removeevent = function (obj, type, fn) {
if (Obj.removeeventlistener) {
Obj.removeeventlistener (Type, FN, false);
else if (obj.detachevent) {
Obj.detachevent ("On" + Type, obj["on" + Type + fn]);
Obj["on" + Type + fn] = null;
}
}
Load Event
var loadevent = function (fn) {
var oldonload = window.onload;
if (typeof oldonload!= "function") {
Window.onload = fn;
} else {
Window.onload = function () {
Oldonload ();
FN ();
}
}
}
Blocking events
var stopevent = function (e) {
E = e | | window.event;
if (E.preventdefault) {
E.preventdefault ();
E.stoppropagation ();
} else {
E.returnvalue = false;
E.cancelbubble = true;
}
}
If it's just blocking event bubbling
var stoppropagation = function (e) {
E = e | | window.event;
if (!+ "\v1") {
E.cancelbubble = true;
} else {
E.stoppropagation ();
}
}
Get Event Source Object
var getEvent1 = function (e) {
E = e | | window.event;
var obj = e.srcelement? E.srcelement:e.target;
return obj;
}
Get Event Source Object
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = Getevent2.caller;
while (C.caller) {
c = C.caller;
}
return c.arguments[0];
}
Or it's a more powerful feature.
var getEvent3 = function (e) {
var e = e | | window.event;
if (!e) {
var c = This.getEvent3.caller;
while (c) {
e = c.arguments[0];
if (e && (Event = = E.constructor | | MouseEvent = = E.constructor)) {
Break
}
c = C.caller;
}
}
var target = e.srcelement? E.srcelement:e.target,
CURRENTN = Target.nodeName.toLowerCase (),
PARENTN = Target.parentNode.nodeName.toLowerCase (),
Grandn = Target.parentNode.parentNode.nodeName.toLowerCase ();
return [E, Target, CURRENTN, PARENTN, GRANDN];
}

_self.addevent = addevent;
_self.addpropertychangeevent = addpropertychangeevent;
_self.removeevent = removeevent;
_self.loadevent = loadevent;
_self.stopevent = stopevent;
_self.stoppropagation = stoppropagation;
_self.getevent1 = GetEvent1;
_self.getevent2 = GetEvent2;
_self.getevent3 = GetEvent3;
}
var eventutil = new Eventutil ();
Eventutil.loadevent (function () {
Eventutil.addevent (document, "click", Function (e) {
Alert (Eventutil.getevent3 (e));
});
Eventutil.addpropertychangeevent (Document,function (e) {
Alert (Eventutil.getevent3 (e));
});
});
</script>

JavaScript event processing is divided into three phases: capture-processing-bubbling.

For example, click the button:
Capture phase: From outer layer to inner layer, first call the Click Capture Stage of the window register to listen to the method, then document, body, layer of the parent node, until the button itself.

Processing phase: The Click Listener method that invokes the button itself.

Foaming stage: Starting from the button, from the inner layer to the outer layers, in turn, call all levels of the parent node of the bubble phase listening method, until window.

However, for IE8 and lower versions of IE, the capture phase is not supported, so event monitoring at the capture phase is not yet universal.

The usual event-handling methods are:

Copy Code code as follows:

function EventHandler (e) {
E = e | | window.event;
var target = E.target | | E.srcelement;
... ...

}

E is an event object, which is passed as a parameter when the event is triggered, but not for IE8 and earlier IE, only through the global event variable, but it does not occur when two events are handled concurrently.