Attachevent ()/addeventlistener ()

Source: Internet
Author: User
Attachevent ()/addeventlistener ()

Sometimes, when an event of an object is triggered, the program it wants to upload may be a large string, or it may call a function, it is also possible to call another function at the same time. There are many practices in practice. Now I want to introduce them one by one.

Let's take a look at what we often see to do.

 

 
1 <HTML>
2 <Head>
3 <Title> new document </title>
4 <SCRIPT>
5 Function Method (){
6 Method1 ();
7 Method2 ();
8 Method3 ();
9 }
10 Function Method1 (){
11 Alert ("Call method 1 ");
12 }
13 Function method2 (){
14 Alert ("Call method 2 ");
15 }
16 Function method3 (){
17 Alert ("Call method 3 ");
18 }
19 </SCRIPT>
20 </Head>
21 <Body>
22 <Input type = "button" value = "" id = "btn1" onclick = "method ();">
23 </Body>
24 </Html>
  View plain | print |?

<HTML> <br/> <pead> <br/> <title> new document </title> <br/> <SCRIPT> <br/> Function Method () {<br/> Method1 (); <br/> method2 (); <br/> method3 (); <br/>}< br/> function Method1 () {<br/> alert ("Call method 1"); <br/>}< br/> function method2 () {<br/> alert ("Call method 2"); <br/>}< br/> function method3 () {<br/> alert ("Call method 3 "); <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <input type = "button" Value = "Point me" id = "btn1" onclick = "method (); "> <br/> </body> <br/> </ptml>

 

When an onclick occurs, a primary method () is called first, and then a method () method is used to call other functions that really need to be modified one by one.

Alternatively, you do not need to use the primary function to directly paste it in onclick.

 

 
1 <Input type = "button" value = "" id = "btn1" onclick = "Method1 (); method2 (); method3 ();">
  View plain | print |?

<Input type = "button" value = "" id = "btn1" onclick = "Method1 (); method2 (); method3 ();">

 

At first glance, it seems that the content in the HTML element is too thick!

But what if I want to set the events of those elements in JavaScript to compile those functions?

 

 
1 <HTML>
2 <Head>
3 <Title> new document </title>
4 </Head>
5 <Body>
6 <Input type = "button" value = "" id = "btn1">
7 <SCRIPT>
8 Function Method (){
9 Method1 ();
10 Method2 ();
11 Method3 ();
12 }
13 Function Method1 (){
14 Alert ("Call method 1 ");
15 }
16 Function method2 (){
17 Alert ("Call method 2 ");
18 }
19 Function method3 (){
20 Alert ("Call method 3 ");
21 }
22 Document. getelementbyid ("btn1"). onclick = method;
23 </SCRIPT>
24 </Body>
25 </Html>
  View plain | print |?

<HTML> <br/> <pead> <br/> <title> new document </title> <br/> </pead> <br/> <body> <br /> <input type = "button" value = "" id = "btn1"> <br/> <SCRIPT> <br/> Function Method () {<br/> Method1 (); <br/> method2 (); <br/> method3 (); <br/>}< br/> function Method1 () {<br/> alert ("Call method 1"); <br/>}< br/> function method2 () {<br/> alert ("Call method 2"); <br/>}< br/> function method3 () {<br/> alert ("Call method 3"); <br/>}< br/> document. getelementbyid ("btn1 "). onclick = method; <br/> </SCRIPT> <br/> </body> <br/> </ptml>

 

If there is a primary function, you can set the function to be sent when an element onclick, and then write other functions.

However, pay attention to the following:

 

 
1 // Document. getelementbyid ("btn1"). onclick = method;
2 Document. getelementbyid ("btn2"). onclick = Method1;
3 Document. getelementbyid ("btn2"). onclick = method2;
4 Document. getelementbyid ("btn2"). onclick = method3;
  View plain | print |?

// Document. getelementbyid ("btn1 "). onclick = method; <br/> document. getelementbyid ("btn2 "). onclick = Method1; <br/> document. getelementbyid ("btn2 "). onclick = method2; <br/> document. getelementbyid ("btn2 "). onclick = method3;

 

When calling, only the method3 () function will be called, and other functions will not be called to the terminal.

In some cases, you may need an event to call multiple functions, but you cannot call them one by one using one primary function. How can this problem be solved?

Hey hey ~ This is the new method attachevent () to be introduced this time (). Attachevent () is supported by IE, and addeventlistener () must be used in Mozilla (). Now, you only need to change the preset event detection method in JavaScript to attachevent.

 

 
1 <HTML>
2 <Head>
3 <Title> new document </title>
4 </Head>
5 <Body>
6 <Input type = "button" value = "attachevent" id = "btn1">
7 <SCRIPT>
8 Function Method1 (){
9 Alert ("Call method 1 ");
10 }
11 Function method2 (){
12 Alert ("Call method 2 ");
13 }
14 Function method3 (){
15 Alert ("Call method 3 ");
16 }
17
18 VaR btn1obj = Document. getelementbyid ("btn1 ");
19 // Object. attachevent (event, function );
20 Btn1obj. attachevent ("onclick", Method1 );
21 Btn1obj. attachevent ("onclick", method2 );
22 Btn1obj. attachevent ("onclick", method3 );
23 </SCRIPT>
24 </Body>
25 </Html>
  View plain | print |?

<HTML> <br/> <pead> <br/> <title> new document </title> <br/> </pead> <br/> <body> <br /> <input type = "button" value = "attachevent" id = "btn1"> <br/> <SCRIPT> <br/> function Method1 () {<br/> alert ("Call method 1"); <br/>}< br/> function method2 () {<br/> alert ("Call method 2"); <br/>}< br/> function method3 () {<br/> alert ("Call method 3"); <br/>}< br/> var btn1obj = document. getelementbyid ("btn1"); <br/> // object. attachevent (event, function); <br/> btn1obj. attachevent ("onclick", Method1); <br/> btn1obj. attachevent ("onclick", method2); <br/> btn1obj. attachevent ("onclick", method3); <br/> </SCRIPT> <br/> </body> <br/> </ptml>

 

However, when the attachevent () function is used, if an event of the same element is assigned multiple methods, will reverse the call to the primary line according to the assigned first and second orders. The result in my example is: Call method3 () first, then call method2 (), and then call Method1 ().

If you want to use the compiler in the Mozilla series, you must change it:

 

 
1 <HTML>
2 <Head>
3 <Title> new document </title>
4 </Head>
5 <Body>
6 <Input type = "button" value = "addeventlistener" id = "btn1">
7 <SCRIPT>
8 Function Method1 (){
9 Alert ("Call method 1 ");
10 }
11 Function method2 (){
12 Alert ("Call method 2 ");
13 }
14 Function method3 (){
15 Alert ("Call method 3 ");
16 }
17
18 VaR btn1obj = Document. getelementbyid ("btn1 ");
19 // Element. addeventlistener (type, listener, usecapture );
20 Btn1obj. addeventlistener ("click", Method1, false );
21 Btn1obj. addeventlistener ("click", method2, false );
22 Btn1obj. addeventlistener ("click", method3, false );
23 </SCRIPT>
24 </Body>
25 </Html>
  View plain | print |?

<HTML> <br/> <pead> <br/> <title> new document </title> <br/> </pead> <br/> <body> <br /> <input type = "button" value = "addeventlistener" id = "btn1"> <br/> <SCRIPT> <br/> function Method1 () {<br/> alert ("Call method 1"); <br/>}< br/> function method2 () {<br/> alert ("Call method 2"); <br/>}< br/> function method3 () {<br/> alert ("Call method 3"); <br/>}< br/> var btn1obj = document. getelementbyid ("btn1"); <br/> // element. addeventlistener (type, listener, usecapture); <br/> btn1obj. addeventlistener ("click", Method1, false); <br/> btn1obj. addeventlistener ("click", method2, false); <br/> btn1obj. addeventlistener ("click", method3, false); <br/> </SCRIPT> <br/> </body> <br/> </ptml>

 

The first parameter number in addeventlistener () is different from the first parameter number in attachevent (), and will call the primary line in the assigned first and second order. In my example, the result is: Call Method1 () first, then call method2 (), and then call method3 (). This part is completely different from the first and second orders of the rows of attachevent.

Example of zookeeper:

Http://abgne.myweb.hinet.net/0018/0018_1.html

Http://abgne.myweb.hinet.net/0018/0018_2.html

Http://abgne.myweb.hinet.net/0018/0018_3.html

 

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.