JS and HTML separation: encapsulate event registration methods

Http://www.cssrain.cn/article.asp? Id = 985

The first is the most common method:

<P id = "para" title = "cssrain demo! "Onclick =" test () "> test </p>
<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:

<P id = "para" title = "cssrain demo! "> Test </p>
<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:

<P id = "para" title = "cssrain demo! "> Test </p>
<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:


<P id = "para" title = "cssrain demo! "> Test </p>
<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...

<P id = "para" title = "cssrain demo! "> Test </p>
<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:

<P id = "para" title = "cssrain demo! "> Test </p>
<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.

Now, the article is written here. I hope you will have some gains...