事件的绑定

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

addEventListener()方法

• 通过addEventListener()方法也可以绑定响应函数
• 使用addEventListener()方法可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数会按照函数的绑定顺序执行
• 这个方法不支持IE8及以下的浏览器
• 参数：

1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

语法：对象. addEventListener(参数1，参数2，参数3)；

box1.addEventListener("click",function(){
    alert("1");
},false);
box1.addEventListener("click",function(){
    alert("2");
},false);
box1.addEventListener("click",function(){
    alert("3");
},false);
//执行结果为1，2，3

attachEvent()方法 

• 在IE8中可以使用attachEvent()方法来绑定事件
• 这个方法也可以同时为一个元素的相同事件绑定多个处理函数，不同的是它是后绑定的函数先执行，执行顺序和addEventListener()相反
• 这个方法只支持IE5到IE10的浏览器，其他浏览器不兼容
• 参数：

1. 事件的字符串，要on
2. 回调函数

语法：对象.attachEvent(参数1，参数2) 

box1.attachEvent("onclick",function(){
    alert("1");
});
box1.attachEvent("onclick",function(){
    alert("2");
});
box1.attachEvent("onclick",function(){
    alert("3");
});
//执行顺序为3，2，1

创造函数兼容所有浏览器 

 

//定义一个函数，用来指定元素绑定响应函数
/*
 * addEventListener()中的this，是绑定事件的对象
 * attachEvent()中的this，是window
 * 需要统一两个方法的this
 */
/*
 * 参数：
 *   obj       要绑定事件的对象
 *   eventStr  事件的字符串（不要on）
 *   callback  回调函数
 */
function bind(obj,eventStr,callback){
    if(addEventListener){
        //大部分浏览器兼容的方式
        obj.addEventListener(eventStr,callback,false);
    }else{
        /*
         * this是谁由调用方式决定
         * callback.call(obj);
         */
        //IE8以下
        obj.attachEvent("on"+eventStr,function(){
            //在匿名函数中调用回调函数
            callback.call(obj);
        });
    }
}