The most basic method is to separate Js and HTML, and then register multiple events for the same element. During this process, we found the compatibility of registration events. Finally, we encapsulate the event registration method for future use. The first is the most common method:
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Script
One day, when we know that JavaScript is to be separated from the HTML structure, we will change the Syntax:
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Window. onload = function (){
Document. getElementById ("para"). onclick = test;
}
Script
When we work longer and longer, sometimes we need to bind multiple identical event types to an element:
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Function pig (){
Alert ("pig ");
}
Window. onload = function (){
Document. getElementById ("para"). onclick = test;
Document. getElementById ("para"). onclick = pig;
}
Script
If we follow the preceding method, we can only output the second function.
At this time, we need to use the attachEvent method:
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Function pig (){
Alert ("pig ");
}
Window. onload = function (){
Document. getElementById ("para"). attachEvent ("onclick", test );
Document. getElementById ("para"). attachEvent ("onclick", pig );
}
Script
In a period of time, you did not find any errors in this Code.
One day, a browser named firefox broke into your field of view. When we put this code into firefox for execution,
It cannot run normally. This is the case. There are more and more problems. However, as a JS programmer, these are all mandatory.
To solve the platform compatibility problem of this code, I flipped through the manual and learned the difference between firefox and ie:
Register events in firefox using the addEventListener method. To be compatible with ie, we must use if... else...
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Function pig (){
Alert ("pig ");
}
Window. onload = function (){
Var element = document. getElementById ("para ");
If (element. addEventListener) {// firefox, w3c
Element. addEventListener ("click", test, false );
Element. addEventListener ("click", pig, false );
} Else {// ie
Element. attachEvent ("onclick", test );
Element. attachEvent ("onclick", pig );
}
}
Script
Now, the code can work on multiple platforms.
However, with the improvement of the level, you cannot determine each time. If you want to encapsulate this judgment, you can directly call it in the future:
Program code
The Code is as follows:
Test
Script
Function test (){
Alert ("test ");
}
Function pig (){
Alert ("pig ");
}
Function addListener (element, e, fn ){
If (element. addEventListener ){
Element. addEventListener (e, fn, false );
} Else {
Element. attachEvent ("on" + e, fn );
}
}
Window. onload = function (){
Var element = document. getElementById ("para ");
AddListener (element, "click", test );
AddListener (element, "click", pig );
}
Script
So far, the work as a programmer is complete.
In the middle, we use the most traditional and basic writing method to separate Js and HTML, and then register multiple events for the same element, we found compatibility issues with registration events. Finally, we encapsulate the event registration method for future use.
