JavaScript---事件綁定方式（傳遞參數）

事件綁定方式：將對html元素或窗口的操做綁定給響應函數的方式。共四種

Html級別綁定

符合DOM0  級的事件綁定方式

符合DOM2

 

Html級別綁定  沒法設置事件流

<script>
			function a(){
				//好的習慣，把整個網頁上全部的事件綁定程序，彙集在一個函數中
				alert("nihao");
			}
		</script>
<input type="button" value="html級別綁定方式" onclick="a()" />

符合DOM0  級的事件綁定方式

將響應程序直接賦值給dom元素的時間屬性。這是DOM最先版本的事件綁定方式，被全部瀏覽器兼容

沒法設置事件流

一、是用普通函數做爲響應程序

document.getElementById("btn1").onclick = sayHellow;    不要帶（）, 帶着（）表示直接調用·

<script>
			window.onload=function(){
				document.getElementById("btn1").onclick = sayHellow; //注意不要帶（）	
			}
			
			function sayHellow(){
				alert("hi")
			}
		</script>

<h2>DOM0級別的綁定方式</h2>
<input type="button" id="btn1" value="html級別綁定方式" />

二、是用匿名函數做爲響應程序

window.onload=function(){
				document.getElementById("btn1").onclick = function(){
					alert("hi")
				}
}

特色：

1.可使用匿名函數或普通函數做爲響應函數

1. 在響應函數中this表明目標元素(當前的button對象)
2. 不符合DOM2標準，沒法設定事件流
3. 沒法直接傳遞參數，但能夠經過其餘方式傳遞
4. 對同一個事件只能綁定一個響應函數，最後綁定的響應函數會執行
5. 經過 obj.onxx = null 能夠解除綁定。

window.onload=function(){
				document.getElementById("btn1").onclick = function(){
					alert(this.id)
				}
			}

彈出 ： btn1

傳遞參數的方式：將名字顯示在列表中

window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			}
			
			var workers = getData(); //返回數組
			//顯示列表
			function initList(workers){
				//獲取ul的dom 對象
				//調用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					li.innerText = workers[i].name;
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}

傳遞參數的方法2 ---將參數 做爲屬性賦 給事件源

點擊刪除同時，顯示出工號

<script>
			window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			}
			
			var workers = getData(); //返回數組
			//顯示列表
			function initList(workers){
				//獲取ul的dom 對象
				//調用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					var button = document.createElement("input");
					button.type = "button";
					button.value = "刪除";
					//設定屬性值
					button.setAttribute("workerNum",workers[i].worknum);
					//綁定刪除函數
					button.onclick = deleteWorker; //沒有辦法傳遞參數
					
				
					li.innerText = workers[i].name;
					li.appendChild(button);
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}
		
		function  deleteWorker(){
		//獲取當前刪除人員工號
			//第一種傳遞參數的方案，把參數傳遞給事件源（this---button）；
			
			var workerNum = this.getAttribute("workerNum");
			alert("刪除工號爲"+workerNum)
		}
		</script>

傳遞參數方法三

使用綁定函數，專門設置一個函數，實現兩重調用（綁定）

<script>
			window.onload=function(){
				function getData(){
				var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
				return workers;
			    }
			
			var workers = getData(); //返回數組
			//顯示列表
			function initList(workers){
				//獲取ul的dom 對象
				//調用dom方法
				var ul=document.getElementById("ul1");
				for(var i=0 ;i<workers.length;i++){
					var li =document.createElement("li"); //<li></li>
					var button = document.createElement("input");
					button.type = "button";
					button.value = "刪除";
					//綁定函數
					bindAndArgs(button ,"onclick",deleteWorker1,workers[i])
				
					li.innerText = workers[i].name;
					li.appendChild(button);
					ul.appendChild(li);
				}
				
			}
			initList(workers);
		}
		
		
		function  deleteWorker1(worker){
		//響應函數
			alert("刪除工號爲"+ worker.worknum);
		}
		//執行當前的函數進行事件綁定，將參數傳給事件源
		function bindAndArgs(dom, eventType , fun ,args){
			dom[eventType] = handleEvent;
			
			function handleEvent(){ //閉包
				fun.call(this,args);   //給響應函數的 this指針賦值爲 workers[i]
			}
		}
		</script>

Javascript中bind、call、apply函數用法

http://developer.51cto.com/art/201503/466978.htm

符合DOM2級別的事件綁定方式：（不兼容）

綁定後能夠設定事件流的順序，順序爲綁定順序。

格式：addEventListener("eventType",callback,use-capture);

1. eventTye：事件名稱。 click 省略on
2. callback：事件處理方法
3. use-capture：false-->冒泡階段/ture-->捕獲階段。

ps:大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，這樣能夠最大限度地兼容各類瀏覽器

//瀏覽器能夠自動傳入一個對象 event對象
/*document.getElementById("outerDiv").addEventListener("click" , function(){
					
})*/ //匿名函數方式
				
document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //綁定函數方式

特色 ：

可使用匿名函數或普通函數

響應函數中this表明目標函數

能夠設定事件流

沒法傳遞參數，經過其餘方式傳遞

對同一個事件能夠綁定多個形影函數，響應函數執行順序依據綁定順序

建議使用jquery 的on方法 解決綁定函數兼容方式

一、能夠傳遞參數

二、實現了事件委託

三、on方法能夠實現事件流控制

四、在通常的瀏覽器都兼容