The first is the most conventional method:
Program code
test
<script> <br>function test(){ <br>alert(" test"); <br>} <br></script>
When one day, we know that JavaScript needs to be separated from the HTML structure, we will change the writing method:
Program code
test
<script> <br>function test(){ <br>alert("test"); <br>} <br>window.onload = function (){ <br>document.getElementById("para").onclick = test; <br>} <br></script>
When we work longer and longer, sometimes We need to bind multiple same event types to an element:
Program code
test
<script> <br>function test(){ <br>alert( "test"); <br>} <br>function pig(){ <br>alert("pig"); <br>} <br>window.onload = function(){ <br>document.getElementById(" para").onclick = test; <br>document.getElementById("para").onclick = pig; <br>} <br></script>
If you follow the above writing method , we can only output the second function.
At this time we need to use the attachEvent method:
Program code
test
<script> <br>function test(){ <br>alert("test" ); <br>} <br>function pig(){ <br>alert("pig"); <br>} <br>window.onload = function(){ <br>document.getElementById("para") .attachEvent("onclick",test); <br>document.getElementById("para").attachEvent("onclick",pig); <br>} <br></script>
For a while, you didn’t find any errors in this code.
One day, a browser named firefox broke into your field of vision. When we put this code into firefox and executed it,
we found that it did not run properly. There are more and more problems like this, but as a JS programmer, these are all things we must face.
In order to solve the platform compatibility problem of this code, I looked through the manual and learned the difference between firefox and IE:
To register events in firefox, use: addEventListener method. At the same time, in order to be compatible with IE, we must use if. .. else...
Program code
< ;p id="para" title="cssrain demo!">test
<script> <br>function test(){ <br>alert("test"); <br>} <br>function pig(){ <br>alert("pig"); <br>} <br>window.onload = function(){ <br>var element = document.getElementById("para"); <br>if(element.addEventListener){ // firefox, w3c <br>element.addEventListener("click",test,false); <br>element.addEventListener("click",pig,false); <br>} else { // ie <br>element.attachEvent("onclick",test); <br>element.attachEvent("onclick",pig); <br>} <br>} <br></script>
At this point, the code is ready to work on multiple platforms.
But as your level improves, you are not satisfied with making a judgment every time. You want to encapsulate this judgment and call it directly in the future:
Program code
test
<script> <br>function test(){ <br>alert("test"); <br>} <br>function pig(){ <br>alert("pig"); <br>} <br>function addListener(element,e,fn){ <br>if(element.addEventListener){ <br>element.addEventListener(e,fn,false); <br>} else { <br>element.attachEvent("on " e,fn); <br>} <br>} <br>window.onload = function(){ <br>var element = document.getElementById("para"); <br>addListener(element,"click" ,test); <br>addListener(element,"click",pig); <br>} <br></script>
At this point, your job as a programmer is over.
In the middle, we started from the most traditional and basic writing method, then realized the separation of Js and HTML, and then realized the registration of multiple events for the same element. During this period, we discovered the compatibility issue of registered events. Finally, we encapsulate the method of registering events for future use.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
