Let's summarize the simple things
Note: The following methods are wrapped in an EventUtil object, and the object literal definition method is directly used. . .
①Add event method
addHandler: function(element,type,handler){ if(element.addEventListener){//Detection whether it is a DOM2-level method element.addEventListener(type, handler, false); }else if (element.attachEvent){//Detection whether it is an IE-level method element.attachEvent("on" + type, handler); } else {//Detection whether it is a DOM0-level method element["on" + type] = handler; }}②Remove the previously added event method
removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }③ Obtain the event and event object target
//Get the compatibility of event object written in getEvent: function(event){ return event ? event : window.event; }, //Get the compatibility of event object target written in getTarget: function(event){ return event.target || event.srcElement; }④Compare writing to block the browser's default events
preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } }⑤Compare writing to prevent events from bubbled
stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; } }⑥The method of obtaining related elements only included in mouseover and mouseout events
//The method to get related elements included in the mouseover and mouseout events getRelatedTarget: function(event){ if (event.relatedTarget){ return event.relatedTarget; } else if (event.toElement){ return event.toElement; } else if (event.fromElement){ return event.fromElement; } else { return null; }}⑦ Mouse wheel judgment
For mousedown and mouseup events, a button property exists in its event object.
Indicates the pressed or released button. The button attribute of DOM may have the following 3 values: 0 represents the main mouse button, and 1 represents the mouse in the middle.
2 indicates the mouse button. In the conventional settings, the main mouse button is the left mouse button, and the second mouse
The button is the right mouse button.
IE8 and previous versions also provided the button attribute, but the value of this attribute is very different from the button attribute of the DOM.
0: means that the button is not pressed.
1: Indicates that the main mouse button has been pressed.
2: Indicates that the mouse button has been pressed twice.
3: Indicates that the primary and secondary mouse buttons have been pressed at the same time.
4: Indicates that the middle mouse button has been pressed.
5: Indicates that the main mouse button and the middle mouse button have been pressed at the same time.
6: It means that the mouse button and the mouse button in the middle have been pressed at the same time.
7: Indicates that three mouse buttons have been pressed at the same time.
getButton: function(event){ if (document.implementation.hasFeature("MouseEvents", "2.0")){ return event.button; } else { switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } }}⑧ Method to obtain the increment value of the mouse wheel (delta)
getWheelDelta: function(event){ if (event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40;//The value in firefox is +3 to scroll up, -3 to scroll down}}⑨Acquisition of character encoding in a cross-browser way
getCharCode: function(event){ if (typeof event.charCode == "number"){ return event.charCode; } else { return event.keyCode; }}⑩ Access data in the clipboard
getClipboardText: function(event){ var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); }11. Set the data in the clipboard
setClipboardText: function(event, value){ if (event.clipboardData){ return event.clipboardData.setData("text/plain", value); } else if (window.clipboardData){ return window.clipboardData.setData("text", value); } }Encapsulate it and then you can use it directly.
For complete files and more basic reset styles of CSS and LESS, see: https://github.com/LuckyWinty/resetFile
The above is all about this article, I hope it will be helpful to everyone's learning.