JS学习：事件

1、事件

指的就是用户与浏览器交互的一瞬间

2、事件对象

响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

• 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下 …

//解决事件对象的兼容性问题
event = event || window.event;
//event中的target表示的触发事件的对象

3、事件的冒泡（Bubble）

• 指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
• 在开发中大部分情况冒泡都是有用的
• 如果不希望发生事件冒泡可以通过事件对象来取消冒泡

//可以将事件对象的cancelBubble设置为true，即可取消冒泡
 event.cancelBubble = true;

4、事件的委派

• 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。
• 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

5、事件的绑定

• 通过HTML元素指定事件属性来绑定

<button onclick="alert('hello');alert('world')">按钮</button>

• 通过DOM对象指定的属性来绑定

    /*
     * 使用 对象.事件 = 函数 的形式绑定响应函数，
     *  它只能同时为一个元素的一个事件绑定一个响应函数，
     *  不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
     */
var btn = document.getElementById('btn'); 
btn.onclick = function(){ 
  alert("hello"); 
};

• 设置事件监听器

    /*
     * addEventListener()
     *  - 通过这个方法也可以为元素绑定响应函数
     *  - 参数：
     *   1.事件的字符串，不要on
     *   2.回调函数，当事件触发时该函数会被调用
     *   3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
     * 
     * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
     * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
     * 
     * 这个方法不支持IE8及以下的浏览器
     */
btn.addEventListener('click' , function(){alert("hello");});

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

处理兼容性

//定义一个函数，用来为指定元素绑定响应函数
   /*
    * 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);
     });
   }
}

6、this

• 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的 上下文对象，
• 根据函数的调用方式的不同，this会指向不同的对象
         以函数的形式调用时，this永远都是window
         以方法的形式调用时，this就是调用方法的那个对象
• 在事件处理程序内的 this 所引用的对象，即是设定了该事件处理程序的元素

7、call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行。

在调用call()和apply()可以将一个对象指定为第一个参数

• 此时这个对象将会成为函数执行时的this
• call()方法可以将实参在对象之后依次传递
• apply()方法需要将实参封装到一个数组中统一传递

this的情况：

• 以函数形式调用时，this永远都是window
• 以方法的形式调用时，this是调用方法的对象
• 以构造函数的形式调用时，this是新创建的那个对象
• 使用call和apply调用时，this是指定的那个对象

8、事件的传播

    /*
     * 事件的传播
     *  - 关于事件的传播网景公司和微软公司有不同的理解
     *  - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
     *   然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
     *  - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
     *   然后在向内传播给后代元素
     *  - W3C综合了两个公司的方案，将事件传播分成了三个阶段
     *   1.捕获阶段
     *    - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
     *   2.目标阶段
     *    - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
     *   3.冒泡阶段
     *    - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
     * 
     *   - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
     *    一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
     * 
     *  - IE8及以下的浏览器中没有捕获阶段
     */