attachEvent() / addEventListener()

最新推荐文章于 2021-03-27 13:31:36 发布

转载最新推荐文章于 2021-03-27 13:31:36 发布

· 1.3k 阅读

文章标签：

#function #button #html #mozilla #javascript #input

javascript 专栏收录该内容

7 篇文章

订阅专栏

attachEvent() / addEventListener()

有時候當某一物件的某一事件被觸發時，它所要執行的程式可能是一大串，有可能是要呼叫某一函式，也有可能同時又要呼叫另一函式。做法其實很多種啦，現在一一的介紹一下。

我們先來看看比較常見的做法是怎樣做的。


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("呼叫方法1");
12	}
13	function method2(){
14	alert("呼叫方法2");
15	}
16	function method3(){
17	alert("呼叫方法3");
18	}
19	</script>
20	</HEAD>
21	<BODY>
22	<INPUT TYPE="button" value="點我" id="btn1" οnclick="method();">
23	</BODY>
24	</HTML>
	view plain \| print \| ?

當觸發onClick時會先呼叫一個主函式method()，然後再來method()函式來一一呼叫其它真正要執行的函式。

或者不用主函式直接就寫在onClick裡面。


1	<INPUT TYPE="button" value="點我" id="btn1" οnclick="method1();method2();method3();">
	view plain \| print \| ?

醬子乍看之下，先寫在HTML元素裡面的話，好像也蠻簡單的厚！

不過若是要在JavaScript中才來設定那些元素的那些Event來觸發那些函式的話呢？


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("呼叫方法1");
15	}
16	function method2(){
17	alert("呼叫方法2");
18	}
19	function method3(){
20	alert("呼叫方法3");
21	}
22	document.getElementById("btn1").onclick = method;
23	</script>
24	</BODY>
25	</HTML>
	view plain \| print \| ?

若有一個主函式的話，就可以設定當某元素onclick時要來觸發那個函式，再來這函式來觸發其它的函式。

但要注意一點唷，若要在JavaScript來設定且不透過主函式時：


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 \| ?

醬寫的話，就只有method3()函式會被呼叫，其它的都不會被呼叫執行到唷。

有時候可能需要某一Event能呼叫多個函式，但又不能用一個主函式來一一呼叫的話，那要怎麼辦呢？

嘿嘿~這就是本次要介紹的新方法attachEvent()。attachEvent()是IE才支援的方法，而在Mozilla中就要用addEventListener()。現在只要把原來JavaScript中的設定Event語法改成用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("呼叫方法1");
10	}
11	function method2(){
12	alert("呼叫方法2");
13	}
14	function method3(){
15	alert("呼叫方法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 \| ?

不過特別的地方是當用attachEvent()函式的話，若同一個元素的某一個Event被指派了多種方法時，會依照著指派的先後順序反過來呼叫執行。所以在我範例中的結果會是：先呼叫method3()，再呼叫method2()，最後才會呼叫method1()。

若是要用在Mozilla系列的瀏覽器的話，則要改成：


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("呼叫方法1");
10	}
11	function method2(){
12	alert("呼叫方法2");
13	}
14	function method3(){
15	alert("呼叫方法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 \| ?

addEventListener()中的第一個參數跟attachEvent()中的第一個參數是不同的，且會依照著指派的先後順序呼叫執行。所以在我範例中的結果會是：先呼叫method1()，再呼叫method2()，最後才會呼叫method3()。這部份跟attachEvent()的執行先後順序是完全相反的。

範例瀏覽：

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