JavaScript registration Event code _ javascript skills

Source: Internet
Author: User
The most basic method is to separate Js and HTML, and then register multiple events for the same element. During this process, we found the compatibility of registration events. Finally, we encapsulate the event registration method for future use. The first is the most common method:
Program code

The Code is as follows:


Test


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:
Program code

The Code is as follows:


Test


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:
Program code

The Code is as follows:


Test


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:
Program code

The Code is as follows:


Test


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...
Program code

The Code is as follows:


Test


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:
Program code

The Code is as follows:


Test


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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.