Common javascript event Encapsulation

Common javascript event Encapsulation
With the rise of Html5 in recent years, more and more applications are implemented using html5. An excellent web application requires both beautiful and concise UI interfaces and a good interaction. Most interactions between Web applications must be implemented using javascript events. Although there are a large number of powerful javascript libraries, these libraries or frameworks are encapsulated by functions, hiding the internal implementation mechanism for users (although you can view and study the source code, but how many children's shoes can be studied ?). Customizing or building a small javascript library is also of great value for kids shoes to improve front-end development. Below is a general javascript event tool library, which can be used to understand native javascript usage through annotations:

1 // javascript universal event encapsulation 2 var myEventUtil = {3 // version 4 version: '1. 0', 5 // Date 6 datetime: '2017-8-25 ', 7 author: 'Jack Wang', 8 // here we use the bubble event model 9 // Add the event function, call method addEvent (btn1, 'click', showmsg); 10 addEvent: function (ele, event, func) {11 // cross-browser compatibility with capability detection processing 12 // DOM 2 event processing 13 if (ele. addEventListener) 14 {15 // false indicates the bubble event model 16 ele. addEventListener (event, func, false); 17} 18 else if (ele. attachEvent) 19 {20 // For click, IE is onclick 21 ele. attachEvent ('on' + event, func); 22} 23 else 24 {25 // DOM level 0 event, compatible with older browsers 26 // not ele. 'on' + event = func; 27 // js. you can use [] to replace 28 ele ['on' + event] = func; 29} 30}, 31 // Delete event function 32 delEvent: function (ele, event, func) {33 if (ele. removeEventListener) 34 {35 ele. removeEventListener (event, func, false); 36} 37 else if (ele. detachEvent) {38 ele. detachEvent ('on' + event, func); // IE 39} 40 else 41 {4 2 // DOM level 0 event, compatible with the old browser 43 ele ['on' + event] = null; 44} 45 }, 46 // obtain the source DOM element 47 getSrcElement: function (event) {48 // If event.targetis not empty, return event.tar get value 49 // otherwise, the event is returned. srcElement 50 return event.tar get | event. srcElement; 51}, 52 // get event type 53 getType: function (event) 54 {55 return event. type; 56}, 57 // get event 58 getEvent: function (event) {59 // window. the event is compatible with IE version 60 return event? Event: window. event; 61}, 62 // prevent event bubbling 63 stopBuble: function (event) {64 if (event. stopPropagation) {65 event. stopPropagation (); 66} 67 else {68 event. cacelBuble = false; // IE 69} 70}, 71 // disable default behavior 72 preventDefault: function (event) {73 if (event. preventDefault) {74 event. preventDefault (); 75} 76 else 77 {78 event. returnValue = false; // IE is the property 79} 80}, 81 // obtain the element 82 $ ID: function (eleid) {83 return based on the element id name Document. getElementById (eleid); 84}, 85 // obtain the element array based on ClassName, providing the parent element to improve retrieval efficiency 86 // usage: var eles = getByClass ('foo '); 87 getByClass: function (className, parent) {88 // If parent is not provided, the top-level element document 89 var oParent = parent is returned? This. $ id (parent): document; 90 // capability detection 91 if (oParent. getElementsByClassName) 92 {93 // you can use spaces to separate classes in strings. You can also match multiple classes, 94 // the following code Selects all elements that have both the foo class name and the bar class name: 95 // var eles = document. getElementsByClassName ('foo bar'); 96 return oParent. getElementsByClassName (className); 97} 98 else 99 {100 var retEles = []; 101 // obtain all the child elements under the parent element 102 var childs = oParent. getElementsByTagName ('*'); 103 for (var I = 0, len = childs. length; I <len; I ++) {104 // The element className class name matches 105 if (childs [I]. className = className) {106 retEles. push (childs [I]); 107} 108} 109 return retEles; 110} 111}, 112 // obtain the first element 113 getFirstByClass: function (ClassName, parent) based on className) {114 // var eles = getByClass (className, parent); 115 // this is not added. the getByClass undefined error 116 var eles = this is often reported. getByClass (className, parent); 117 return eles [0]; 118}, 119 // get Version information 120 getVersion: function () {121 return 'version: '+ this. version; 122} 123 124 };