Attachevent ()/addeventlistener ()

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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> <pead> <title> new document </title> <SCRIPT> Function Method () { Method1 (); method2 (); method3 (); } function Method1 () { alert ("Call method 1"); } function method2 () { alert ("Call method 2"); } function method3 () { alert ("Call method 3 "); } </SCRIPT> </pead> <body> <input type = "button" Value = "Point me" id = "btn1" onclick = "method (); "> </body> </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 \|?

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> <pead> <title> new document </title> </pead> <body> <input type = "button" value = "" id = "btn1"> <SCRIPT> Function Method () { Method1 (); method2 (); method3 (); } function Method1 () { alert ("Call method 1"); } function method2 () { alert ("Call method 2"); } function method3 () { alert ("Call method 3"); } document. getelementbyid ("btn1 "). onclick = method; </SCRIPT> </body> </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; document. getelementbyid ("btn2 "). onclick = Method1; document. getelementbyid ("btn2 "). onclick = method2; 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> <pead> <title> new document </title> </pead> <body> <input type = "button" value = "attachevent" id = "btn1"> <SCRIPT> function Method1 () { alert ("Call method 1"); } function method2 () { alert ("Call method 2"); } function method3 () { alert ("Call method 3"); } var btn1obj = document. getelementbyid ("btn1"); // object. attachevent (event, function); btn1obj. attachevent ("onclick", Method1); btn1obj. attachevent ("onclick", method2); btn1obj. attachevent ("onclick", method3); </SCRIPT> </body> </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> <pead> <title> new document </title> </pead> <body> <input type = "button" value = "addeventlistener" id = "btn1"> <SCRIPT> function Method1 () { alert ("Call method 1"); } function method2 () { alert ("Call method 2"); } function method3 () { alert ("Call method 3"); } var btn1obj = document. getelementbyid ("btn1"); // element. addeventlistener (type, listener, usecapture); btn1obj. addeventlistener ("click", Method1, false); btn1obj. addeventlistener ("click", method2, false); btn1obj. addeventlistener ("click", method3, false); </SCRIPT> </body> </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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More