javascript基礎（事件的繫結）（三十四）

厚積薄發2017發表於2017-02-14
JavaScript事件

1.事件的繫結：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				
				//為按鈕繫結一個單擊響應函式
				/*btn01.onclick = function(){
					alert(1);
				};
				
				//再為按鈕繫結一個單擊響應函式
				btn01.onclick = function(){
					alert(2);
				};*/
				
				/*
				 * 使用 物件.事件 的形式不能同時為一個元素的同一個事件繫結多個處理函式，
				 * 	如果繫結了多個，則後邊的會將前邊的覆蓋掉
				 * 
				 * 如果需要同時為一個事件繫結多個響應函式，則可以使用
				 * 	addEventListener()這個方法來繫結響應函式
				 * 		引數：
				 * 			1.要繫結的事件（字串   不要on）
				 * 			2.回撥函式（事件觸發時，該函式將會執行）
				 * 			3.是否在捕獲階段觸發事件（都傳false）
				 * 
				 * 	使用這種方式可以同時為一個事件繫結多個響應函式，
				 * 		響應函式按照繫結的順序執行
				 * 
				 *  該方法不支援IE8及以下的瀏覽器
				 * 		在這些瀏覽器中需要使用 attachEvent()方法來實現相同的功能
				 */
				
				/*btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);*/
				
				/*
				 * attachEvent()
				 * 	- 引數：
				 * 		1.事件的型別（字串  要on）
				 * 		2.回撥函式
				 * 
				 * attachEvent()
				 * 	- 可以同時為一個事件繫結多個響應函式，但是它的執行順序不一定
				 * 		ie9 ie10 先繫結先執行
				 * 		ie8 後繫結先執行
				 * 
				 * 這個方法只支援IE10及以下的瀏覽器
				 */
				/*btn01.attachEvent("onclick" , function(){
					alert(1);
				});*/
				
				/*btn01.attachEvent("onclick" , function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick" , function(){
					alert(3);
				});*/
				
				/*
				 * 在正常瀏覽器中使用addEventListener()來繫結
				 * 		它的響應函式中的this就是繫結事件的物件
				 * 而在IE中，使用的是attachEvent()來繫結的事件
				 * 		而它的響應函式中的this是window
				 */
				bind(btn01 , "click" , function(){
					alert(this);
				});
				
			};
			
			/*
			 * 自定義一個函式，來相容所有的瀏覽器
			 * 引數：
			 * 		obj  要繫結事件的物件
			 * 		eventStr 事件的字串,不要on
			 * 		callback 回撥函式，事件觸發時呼叫的函式
			 */
			function bind(obj , eventStr , callback){
				
				if(obj.addEventListener){
					//如果是正常瀏覽器
					obj.addEventListener(eventStr , callback , false);
				}else{
					//IE8
					/*
					 * attachEvent()中的回撥函式的this是window，需要修改為obj
					 * this是誰由函式的呼叫方式決定
					 * 	1.以函式的形式呼叫，this是window
					 * 	2.以方法的形式呼叫，this是呼叫方法的物件
					 * 	3.以建構函式的形式呼叫，this是新建立的物件
					 * 	4.使用call和apply呼叫時，this是第一個引數
					 */
					obj.attachEvent("on"+eventStr , function(){
						//在attchEvent()中不傳遞callback而是傳遞一個匿名函式
						//這樣在事件觸發時，瀏覽器不會呼叫callback而是呼叫匿名函式
						//在匿名函式中來呼叫回撥函式
						callback.call(obj);
						
					});
				}
			}
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點我一下</button>
		
	</body>
</html>


 

 

相關文章