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方法能够实现事件流控制

四、在通常的浏览器都兼容