Events are the beating heart of JavaScript applications and the glue that glues everything together. The event occurs when we have certain types of interactions with the web pages in the browser. Events may be a user clicking on certain content, a mouse passing through a specific element, or pressing certain keys on the keyboard. Events may also be something that happens in a web browser, such as a certain web page loading, or the user scrolls the window or changes the window size.
By using JavaScript, you can listen to specific events and specify that certain events occur in response to them.
1. Add event listening
IE:
Copy the code as follows: attachEvent("onclick",function(){...}) //Add
detachEvent("onclick",function(){...}) //Delete
FF:
The code copy is as follows: addEventListener("click",function(){...},false)
//You can add multiple event listening to one object, which is different from the default object event
removeEventListenner("click",function(){...},false)
2. Obtain the event object
IE:
The code copy is as follows: op.onClick=function(){
ver oevent = window.event; //As a property of window
}
FF:
The code copy is as follows: op.onClick=function(oevent){
.... //Control by passing in parameters
}
General:
The code copy is as follows: op.onClick=function(oevent){
if(window.event){
oevent=window.event;
}
}
//It is obtained in real time, but the properties and methods of their return objects are not consistent, but they can be solved by using EventUtil!
var EventUtil = new Object;/**//* This method is used to add events to a specific object. oTarget is the specified object, sEventType is the event type, such as click, keydown, etc. fnHandler is the event callback function*/EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) { //In the case of firefox (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } //IE else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};/* This method is used to remove specific events of a specific object. oTarget is the specified object, sEventType is the event type, such as click, keydown, etc. fnHandler is the event callback function*/ EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; }};/*Format events, because IE and other browsers get events differently and the properties of events are also different, this method provides a consistent event*/EventUtil.formatEvent = function (oEvent) { //isIE and isWin refer to a js file to determine the browser and operating system type if (isIE && isWin) { oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; //IE only supports bubbles and does not support capture of oEvent.eventPhase = 2; oEvent.isChar = (oEvent.charCode > 0); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; //Default behavior of blocking events oEvent.preventDefault = function () { this.returnValue = false; }; //Convert toElement,fromElement into standard relatedTarget if (oEvent.type == "mouseout") { oEvent.relatedTarget = oEvent.toElement; } else if (oEvent.type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } //Cancel bubbling oEvent.stopPropagation = function () { this.cancelBubble = true; }; oEvent.target = oEvent.srcElement; //Add event occurrence time attribute, IE does not have oEvent.time = (new Date).getTime(); } return oEvent;};EventUtil.getEvent = function() { if (window.event) { //Format IE events return this.formatEvent(window.event); } else { return EventUtil.getEvent.caller.arguments[0]; }}; /**Attached a js file that judges the browser and system type. By introducing some global variables with obvious names as the result of judgment, you need to be careful of variable name conflicts when using: */var sUserAgent = navigator.userAgent;var fAppVersion = parseFloat(navigator.appVersion);function compareVersions(sVersion1, sVersion2) { var aVersion1 = sVersion1.split("."); var aVersion2 = sVersion2.split("."); if (aVersion1.length > aVersion2.length) { for (var i=0; i < aVersion1.length - aVersion2.length; i++) { aVersion2.push("0"); } } else if (aVersion1.length < aVersion2.length) { for (var i=0; i < aVersion2.length - aVersion1.length; i++) { aVersion1.push("0"); } } for (var i=0; i < aVersion1.length; i++) { if (aVersion1[i] < aVersion2[i]) { return -1; } else if (aVersion1[i] > aVersion2[i]) { return 1; } } return 0;}var isOpera = sUserAgent.indexOf("Opera") > -1;var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;if (isOpera) { var fOperaVersion; if(navigator.appName == "Opera") { fOperaVersion = fAppVersion; } else { var reOperaVersion = new RegExp("Opera (//d+//.//d+)"); reOperaVersion.test(sUserAgent); fOperaVersion = parseFloat(RegExp["$1"]); } isMinOpera4 = fOperaVersion >= 4; isMinOpera5 = fOperaVersion >= 5; isMinOpera6 = fOperaVersion >= 6; isMinOpera7 = fOperaVersion >= 7; isMinOpera7_5 = fOperaVersion >= 7.5;}var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1; var isMinSafari1 = isMinSafari1_2 = false;var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;if (isKHTML) { isSafari = sUserAgent.indexOf("AppleWebKit") > -1; isKonq = sUserAgent.indexOf("Konqueror") > -1; if (isSafari) { var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)"); reAppleWebKit.test(sUserAgent); var fAppleWebKitVersion = parseFloat(RegExp["$1"]); isMinSafari1 = fAppleWebKitVersion >= 85; isMinSafari1_2 = fAppleWebKitVersion >= 124; } else if (isKonq) { var reKonq = new RegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?)"); reKonq.test(sUserAgent); isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0; isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0; isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0; isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0; } }var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera; var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;if (isIE) { var reIE = new RegExp("MSIE (//d+//.//d+);"); reIE.test(sUserAgent); var fIEVersion = parseFloat(RegExp["$1"]); isMinIE4 = fIEVersion >= 4; isMinIE5 = fIEVersion >= 5; isMinIE5_5 = fIEVersion >= 5.5; isMinIE6 = fIEVersion >= 6.0;}var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;if (isMoz) { var reMoz = new RegExp("rv:(//d+//.//d+(?://.//d+)?)"); reMoz.test(sUserAgent); isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0; isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0; isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;}var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape") && (fAppVersion >= 4.0 && fAppVersion < 5.0);var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;if (isNS4) { isMinNS4 = true; isMinNS4_5 = fAppVersion >= 4.5; isMinNS4_7 = fAppVersion >= 4.7; isMinNS4_8 = fAppVersion >= 4.8;}var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh");var isUnix = (navigator.platform == "X11") && !isWin && !isMac;var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;var isMac68K = isMacPPC = false;var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = isMinSunOS5_5 = false;if (isWin) { isWin95 = sUserAgent.indexOf("Win95") > -1 || sUserAgent.indexOf("Windows 95") > -1; isWin98 = sUserAgent.indexOf("Windows 98") > -1 || sUserAgent.indexOf("Windows 98") > -1; isWinME = sUserAgent.indexOf("Windows 98") > -1 || sUserAgent.indexOf("Windows ME") > -1; isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1; isWinNT4 = sUserAgent.indexOf("Windows NT") > -1 || sUserAgent.indexOf("Windows NT") > -1 || sUserAgent.indexOf("Windows NT") > -1 || sUserAgent.indexOf("Windows NT4.0") > -1 && (!isWinME && !isWin2K && !isWinXP);} if (isMac) { isMac68K = sUserAgent.indexOf("Mac_68000") > -1 || sUserAgent.indexOf("68K") > -1; isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1 || sUserAgent.indexOf("PPC") > -1; }if (isUnix) { isSunOS = sUserAgent.indexOf("SunOS") > -1; if (isSunOS) { var reSunOS = new RegExp("SunOS (//d+//.//d+(?://.//d+)?)"); reSunOS.test(sUserAgent); isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0; isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0; isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0; }}The above is the js event handling. I hope you can give you a reference and I hope you can support Wulin.com more.