Home > Web Front-end > JS Tutorial > body text

JavaScript registration event code_javascript skills

WBOY
Release: 2016-05-16 18:11:32
Original
1251 people have browsed it

The first is the most conventional method:
Program code

Copy code The code is as follows:

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
Copy code The code is as follows:

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
Copy code The code is as follows:

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
Copy code The code is as follows:

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
Copy code The code is as follows:

< ;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
Copy code The code is as follows:

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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!