事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，

                 *  它只能同时为一个元素的一个事件绑定一个响应函数，

                 *  不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

 

 addEventListener()

                 *  - 通过这个方法也可以为元素绑定响应函数

                 *  - 参数：

                 *      1.事件的字符串，不要on

                 *      2.回调函数，当事件触发时该函数会被调用

                 *      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，

                 *  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

                 *

                 * 这个方法不支持IE8及以下的浏览器

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);

                });

 

 

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

            /*

             * addEventListener()中的this，是绑定事件的对象

             * attachEvent()中的this，是window

             *  需要统一两个方法this

             */

            /*

             * 参数：

             *  obj 要绑定事件的对象

             *  eventStr 事件的字符串(不要on)

             *  callback 回调函数

function bind(obj , eventStr , callback){

                if(obj.addEventListener){

                    //大部分浏览器兼容的方式

                    obj.addEventListener(eventStr , callback , false);

                }else{

                    /*

                     * this是谁由调用方式决定

                     * callback.call(obj)

                     */

                    //IE8及以下

                    obj.attachEvent("on"+eventStr , function(){

                        //在匿名函数中调用回调函数

                        callback.call(obj);

                    });

 }

            }

 bind(btn01 , "click" , function(){

                    alert(this);

                });