事件的绑定

事件的绑定

• 使用对象.事件 = 函数的形式绑定响应函数
• 它只能同时为一个元素的一个事件绑定一个响应函数
• 不能绑定多个，如果绑定了多个，则后边会覆盖到前边的

//获取按钮对象
            var btn01 = document.getElementById("btn01");
            //为btn01绑定一个单击响应函数
        
            btn01.onclick = function(){
                alert(1);
            }

            //为btn01绑定第二个单击响应函数、
        
            btn01.onclick = function(){
                alert(2);
            } 

addEventListener()

• 通过该方法也可以为元素绑定响应函数
• 参数：
  1.事件的字符串，不要on
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

  btn01.addEventListener("click",function(){
                alert(1);
            },false);
            btn01.addEventListener("click",function(){
                alert(2);
            },false);
            btn01.addEventListener("click",function(){
                alert(3);
            },false); 
            

attachEvent()

• 在IE8中可以使用attachEvent()来绑定事件
• 参数：
  1.事件的字符串，要on
  2.回调函数
  这个方法也可以同时为一个事件绑定多个处理函数，
  不同的是它是后绑定的先执行，执行顺序和addEventListener()相反

 btn01.attachEvent("onclick",function(){
                alert(1);
            });
            btn01.attachEvent("onclick",function(){
                alert(2);
            });
            btn01.attachEvent("onclick",function(){
                alert(3);
            })

定义一个函数，用来为指定元素绑定响应函数

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this是window
需要统一两个方法this

参数
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数

 function bind(obj,eventStr,callback){
               if(addEventListener){
                    //大部分浏览器
                    obj.addEventListener(eventStr,callback,false);
               }else{
                   /* 
                   *    this是谁由调用方式决定
                   *    callback.call(obj)
                   * */ 
                    //IE8及以下
                    obj.attachEvent("on"+eventStr,function(){
                        //在匿名函数中调用回调函数
                    });
               }
           }


 bind(btn01,"click",function(){
               alert(1);
           })