JavaScript---事件绑定 (多种方式、传递参数）

事件绑定方式：将对html元素或窗口的操作绑定给响应函数的方式。共四种

Html级别绑定

符合DOM0  级的事件绑定方式

符合DOM2

Html级别绑定  无法设置事件流

1.  
   <script>
2.  
   function a(){
3.  
   //好的习惯，把整个网页上所有的事件绑定程序，聚集在一个函数中
4.  
   alert("nihao");
5.  
   }
6.  
   </script>
7.  
   <input type="button" value="html级别绑定方式" onclick="a()" />

符合DOM0  级的事件绑定方式

将响应程序直接赋值给dom元素的时间属性。这是DOM最早版本的事件绑定方式，被所有浏览器兼容

无法设置事件流

1、是用普通函数作为响应程序

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

1.  
   <script>
2.  
   window.onload=function(){
3.  
   document.getElementById("btn1").onclick = sayHellow; //注意不要带（）
4.  
   }
5.  
    
6.  
   function sayHellow(){
7.  
   alert("hi")
8.  
   }
9.  
   </script>

1.  
   <h2>DOM0级别的绑定方式</h2>
2.  
   <input type="button" id="btn1" value="html级别绑定方式" />

2、是用匿名函数作为响应程序

1.  
   window.onload=function(){
2.  
   document.getElementById("btn1").onclick = function(){
3.  
   alert("hi")
4.  
   }
5.  
   }

特点：

1.可以使用匿名函数或普通函数作为响应函数

1. 在响应函数中this代表目标元素(当前的button对象)
2. 不符合DOM2标准，无法设定事件流
3. 无法直接传递参数，但可以通过其他方式传递
4. 对同一个事件只能绑定一个响应函数，最后绑定的响应函数会执行
5. 通过 obj.onxx = null 可以解除绑定。

1.  
   window.onload=function(){
2.  
   document.getElementById("btn1").onclick = function(){
3.  
   alert(this.id)
4.  
   }
5.  
   }

弹出 ： btn1

传递参数的方式：将名字显示在列表中

1.  
   window.onload=function(){
2.  
   function getData(){
3.  
   var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
4.  
   return workers;
5.  
   }
6.  
    
7.  
   var workers = getData(); //返回数组
8.  
   //显示列表
9.  
   function initList(workers){
10.  
    //获取ul的dom 对象
11.  
    //调用dom方法
12.  
    var ul=document.getElementById("ul1");
13.  
    for(var i=0 ;i<workers.length;i++){
14.  
    var li =document.createElement("li"); //<li></li>
15.  
    li.innerText = workers[i].name;
16.  
    ul.appendChild(li);
17.  
    }
18.  
     
19.  
    }
20.  
    initList(workers);
21.  
    }

传递参数的方法2 ---将参数 作为属性赋 给事件源

点击删除同时，显示出工号

1.  
   <script>
2.  
   window.onload=function(){
3.  
   function getData(){
4.  
   var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
5.  
   return workers;
6.  
   }
7.  
    
8.  
   var workers = getData(); //返回数组
9.  
   //显示列表
10.  
    function initList(workers){
11.  
    //获取ul的dom 对象
12.  
    //调用dom方法
13.  
    var ul=document.getElementById("ul1");
14.  
    for(var i=0 ;i<workers.length;i++){
15.  
    var li =document.createElement("li"); //<li></li>
16.  
    var button = document.createElement("input");
17.  
    button.type = "button";
18.  
    button.value = "删除";
19.  
    //设定属性值
20.  
    button.setAttribute("workerNum",workers[i].worknum);
21.  
    //绑定删除函数
22.  
    button.onclick = deleteWorker; //没有办法传递参数
23.  
     
24.  
     
25.  
    li.innerText = workers[i].name;
26.  
    li.appendChild(button);
27.  
    ul.appendChild(li);
28.  
    }
29.  
     
30.  
    }
31.  
    initList(workers);
32.  
    }
33.  
     
34.  
    function deleteWorker(){
35.  
    //获取当前删除人员工号
36.  
    //第一种传递参数的方案，把参数传递给事件源（this---button）；
37.  
     
38.  
    var workerNum = this.getAttribute("workerNum");
39.  
    alert("删除工号为"+workerNum)
40.  
    }
41.  
    </script>

传递参数方法三

使用绑定函数，专门设置一个函数，实现两重调用（绑定）

1.  
   <script>
2.  
   window.onload=function(){
3.  
   function getData(){
4.  
   var workers = [ { name:"sam",worknum:"111"},{ name:"amy",worknum:"112"}]
5.  
   return workers;
6.  
   }
7.  
    
8.  
   var workers = getData(); //返回数组
9.  
   //显示列表
10.  
    function initList(workers){
11.  
    //获取ul的dom 对象
12.  
    //调用dom方法
13.  
    var ul=document.getElementById("ul1");
14.  
    for(var i=0 ;i<workers.length;i++){
15.  
    var li =document.createElement("li"); //<li></li>
16.  
    var button = document.createElement("input");
17.  
    button.type = "button";
18.  
    button.value = "删除";
19.  
    //绑定函数
20.  
    bindAndArgs(button ,"onclick",deleteWorker1,workers[i])
21.  
     
22.  
    li.innerText = workers[i].name;
23.  
    li.appendChild(button);
24.  
    ul.appendChild(li);
25.  
    }
26.  
     
27.  
    }
28.  
    initList(workers);
29.  
    }
30.  
     
31.  
     
32.  
    function deleteWorker1(worker){
33.  
    //响应函数
34.  
    alert("删除工号为"+ worker.worknum);
35.  
    }
36.  
    //执行当前的函数进行事件绑定，将参数传给事件源
37.  
    function bindAndArgs(dom, eventType , fun ,args){
38.  
    dom[eventType] = handleEvent;
39.  
     
40.  
    function handleEvent(){ //闭包
41.  
    fun.call(this,args); //给响应函数的 this指针赋值为 workers[i]
42.  
    }
43.  
    }
44.  
    </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:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

1.  
   //浏览器可以自动传入一个对象 event对象
2.  
   /*document.getElementById("outerDiv").addEventListener("click" , function(){
3.  
    
4.  
   })*/ //匿名函数方式
5.  
    
6.  
   document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //绑定函数方式

特点 ：

可以使用匿名函数或普通函数

响应函数中this代表目标函数

可以设定事件流

无法传递参数，通过其他方式传递

对同一个事件可以绑定多个形影函数，响应函数执行顺序依据绑定顺序

建议使用jquery 的on方法 解决绑定函数兼容方式

1、可以传递参数

2、实现了事件委托

3、on方法可以实现事件流控制

4、在一般的浏览器都兼容