A brief analysis of Javascript registration events_javascript skills

First is the most conventional method:

<p id="para" title="cssrain demo!" onclick="test()">test</p>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

When one day, we know After JavaScript is separated from the HTML structure, it will be written in a different way:

<p id="para" title="cssrain demo!"> </p>test
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

When we work longer and longer Finally, sometimes we need to bind multiple same event types to an element: <p id="para" title="cssrain demo!"></p> test

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

If you follow the above writing method, We can only output the second function. At this time we need to use the attachEvent method: <p id="para" title="cssrain demo!"></p>
test

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

In a period of time, you I 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. <p id="para" title="cssrain demo!">In order to solve the platform compatibility problem of this code, I looked through the manual and learned the difference between firefox and ie: </p>To register events in firefox: addEventListener method, and in order to be compatible with ie, we must use to if ... else...
test

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh it to execute
]

At this point, the code can Worked on multiple platforms. <p id="para" title="cssrain demo!"></p>But as your level progresses, you are no longer satisfied with making a judgment every time. You want to encapsulate this judgment and call it directly in the future:
test

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute it <script> function test(){ alert("test"); } </script>]<script> function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onclick = test; } </script> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ document.getElementById("para").onclick = test; document.getElementById("para").onclick = pig; } </script>At this point, as a programmer The work is done. <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 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. <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><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>Okay, this is the end of the article. I hope everyone has gained something. . .