How to add events attachEvent and addEventListener in js

Generally, we add events in JS. This is the way viewsource1obj. onclickmethod binds events and is compatible with mainstream browsers. But what if the same event is added to an element multiple times? Viewsource1obj. onclickmethod1; 2obj. onclickmethod2; 3obj. onc...

Generally, we add events in JS.
View source
 

1 obj. onclick = method
This event binding method is compatible with mainstream browsers. But what if the same event is added to an element multiple times?
View source
 

1 obj. onclick = method1;
2 obj. onclick = method2;
3 obj. onclick = method3;
If this is the case, only the last Bound event will be executed. In this case, we will not be able to use the onclick statement, in IE, we can use the attachEvent method.
View source
 

1 // object. attachEvent (event, function );
2 btn1Obj. attachEvent ("onclick", method1 );
3 btn1Obj. attachEvent ("onclick", method2 );
4 btn1Obj. attachEvent ("onclick", method3 );
The preceding format is the event type. Note that you need to add on, such as onclick, onsubmit, onchange, And the execution sequence is
Method3-> method2-> method1
Unfortunately, this Microsoft private method is not supported by Firefox and other browsers. Fortunately, they all support the W3C standard addEventListener method.
View source
 

1 // element. addEventListener (type, listener, useCapture );
2 btn1Obj. addEventListener ("click", method1, false );
3 btn1Obj. addEventListener ("click", method2, false );
4 btn1Obj. addEventListener ("click", method3, false );
The execution sequence is method1-> method2-> method3
As a front-end development engineer, the most tragic issue is browser compatibility. There are two ways to add events in the same way, we had to re-write a general function for adding events. Fortunately, our predecessors helped us with this.
View source
 

01 function addEvent (elm, evType, fn, useCapture ){
02 if (elm. addEventListener ){
03 elm. addEventListener (evType, fn, useCapture); // DOM2.0
04 return true;
05}
06 else if (elm. attachEvent ){
07 var r = elm. attachEvent ('on' + evType, fn); // IE5 +
08 return r;
09}
10 else {
11 elm ['on' + evType] = fn; // DOM 0
12}
13}
The following is the version of Dean Edwards.
View source
 

01 function addEvent (element, type, handler ){
02 // assign a unique ID for each event handler
03 if (! Handler. $ guid) handler. $ guid = addEvent. guid ++;
04 // create a hash table for the element Event Type
05 if (! Element. events) element. events = {};
06 // create a hash table for an event handler for each "element/event"
07 var handlers = element. events [type];
08 if (! Handlers ){
09 handlers = element. events [type] = {};
10 // store existing event processing functions (if any)
11 if (element ["on" + type]) {
12 handlers [0] = element ["on" + type];
13}
14}
15 // Save the event processing function to the hash table
16 handlers [handler. $ guid] = handler;
17 // assign a global event processing function to do all the work.
18 element ["on" + type] = handleEvent;
19 };
20 // The counter used to create a unique ID
21 addEvent. guid = 1;
22 function removeEvent (element, type, handler ){
23 // Delete the event handler function www.2cto.com from the hash table
24 if (element. events & element. events [type]) {
25 delete element. events [type] [handler. $ guid];
26}
27 };
28 function handleEvent (event ){
29 var returnValue = true;
30 // capture event objects (IE uses global event objects)
31 event = event | fixEvent (window. event );
32 // obtain the reference of the hash table of the event processing function
33 var handlers = this. events [event. type];
34 // execute each processing function
35 for (var I in handlers ){
36 this. $ handleEvent = handlers [I];
37 if (this. $ handleEvent (event) === false ){
38 returnValue = false;
39}
40}
41 return returnValue;
42 };
43 // Add some "missing" functions to the IE event object
44 function fixEvent (event ){
45 // Add standard W3C Method
46 event. preventDefault = fixEvent. preventDefault;
47 event. stopPropagation = fixEvent. stopPropagation;
48 return event;
49 };
50 fixEvent. preventDefault = function (){
51 this. returnValue = false;
52 };
53 fixEvent. stopPropagation = function (){
54 this. cancelBubble = true;
55 };
This feature is very powerful, solving this point problem of IE. event is always passed as the first parameter, so cross-browser communication is even more difficult.
Finally, we contributed an HTML5 Working Group version:
View source
 

01 var addEvent = (function (){
02 if (document. addEventListener ){
03 return function (el, type, fn ){
04 if (el. length ){
05 for (var I = 0; I 06 addEvent (el [I], type, fn );
07}
08} else {
09 el. addEventListener (type, fn, false );
10}
11 };
12} else {
13 return function (el, type, fn ){
14 if (el. length ){
15 for (var I = 0; I 16 addEvent (el [I], type, fn );
17}
18} else {
19 el. attachEvent ('on' + type, function (){
20 return fn. call (el, window. event );
21 });
22}
23 };
24}
25 })();
Readers may find that the execution sequence of the attachEvent of IE is different from that of the W3C standard addEventListener for binding multiple events.

 

From the beauty of your smile