Less nonsense, just give the example code:
The code copy is as follows:
<script type="text/javascript">
function EventUtil() {
var _self = this;
///Add event
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 attributes to change event
var addPropertyChangeEvent = function (obj, fn) {
if (window.ActiveXObject) {
obj.onpropertychange = fn;
} else {
obj.addEventListener("input", fn, false);
}
}
//Remove event
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;
}
}
//Loading event
var loadEvent = function (fn) {
var oldonload = window.onload;
if (typeof oldonload != "function") {
window.onload = fn;
} else {
window.onload = function () {
oldonload();
fn();
}
}
}
//Block 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 to prevent the event from bubbled
var stopPropagation = function (e) {
e = e || window.event;
if (!+"/v1") {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
//Get the event source object
var getEvent1 = function (e) {
e = e || window.event;
var obj = e.srcElement ? e.srcElement : e.target;
return obj;
}
//Get the 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 this function is more powerful
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 stages: Capture-processing-bubbles.
Take clicking the button as an example:
Capture stage: From the outer layer to the inner layer, first call the click capture stage monitoring method registered for Window, then document, body, parent nodes layer by layer, all the way to the button itself.
Processing phase: Call the click listening method of the button itself.
Bubble stage: Starting from the button, from the inner layer to the outer layer, call the bubble stage monitoring method of the parent nodes at each level in sequence until Window.
However, for IE8 and lower IE, the capture phase is not supported, so event listening in the capture phase is not yet common.
The usual event handling method is:
The code copy is as follows:
function eventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
... ...
}
e is an event object. When the event is triggered, it is passed in as a parameter. However, it is not applicable to IE8 and lower versions of IE. It can only be accessed through the global event variable. Fortunately, there will be no situation where two events are processed at the same time.