The first is the most conventional approach:
<p id= "para" title= "Cssrain demo!" onclick= "Test ()" >test</p> <script> function test () {alert ("test") ; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
One day, when we know that JavaScript is separated from the HTML structure, we change the way it is written:
<p id= "para" title= "Cssrain demo!" >test</p> <script> function Test () {alert ("test"); } window.onload = function () {document.getElementById ("para"). onclick = test; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
When we work more and more, sometimes we need to bind an element to multiple identical event types:
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
If you follow the above, we can only output the second function.
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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
For a while, you didn't find any errors in the code.
One day, a browser called Firefox broke into your field of vision, and when we put this code into Firefox,
Discovery does not work correctly. This is the problem, more and more, however, as a JS programmer, these are must face.
In order to solve this code platform compatibility problem, I turned over the manual, know the difference between Firefox and IE:
Firefox registration Event Use: AddEventListener method, at the same time, in order to 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, the Element.addeventlistener of the consortium ("click", Test,false); Element.addeventlistener ("click", Pig,false); else {//IE element.attachevent ("onclick", test); Element.attachevent ("onclick", pig); }} </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
At this point, the code can work on multiple platforms.
But with the level of progress, you do not meet every time to judge, you want to encapsulate this judgment, you can call directly later:
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
So far, the job as a programmer is over.
In the middle we from a most traditional, most basic writing, and then realize the separation of JS and HTML, and then realize the same element to register multiple events, during which we found the registration event compatibility problem. At last, we encapsulate the method of registering the event, which is convenient to use later.
Well, the article is written here. Hope you have a harvest oh ...
