js-DOM03-事件

事件（Event）
    - 事件对象
    - 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
        这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
    - 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
        - 例子：
            元素.事件 = function(event){
                event = event || window.event;
                
            };
            
            元素.事件 = function(e){
                e = e || event;
                
            };
            
     * clientX和clientY
     *     用于获取鼠标在当前的可见窗口的坐标
     * div的偏移量，是相对于整个页面的
     * 
     * pageX和pageY可以获取鼠标相对于当前页面的坐标
     *     但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
            
    - 事件的冒泡（Bubble）
    - 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
    - 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
    - 可以将事件对象的cancelBubble设置为true，即可取消冒泡
        - 例子：
                元素.事件 = function(event){
                    event = event || window.event;
                    event.cancelBubble = true;
                };
    -  事件的委派
    -  指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
               从而通过祖先元素的响应函数来处理事件。
    -  事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
            
    - 事件绑定的三种方式
    - 事件绑定的方式一：
            * 使用 对象.事件 = 函数 的形式绑定响应函数，
            * 它只能同时为一个元素的一个事件绑定一个响应函数，
            * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
        -例子：
            元素对象.onclick = function(){
                alert(1);
            }
    - 事件绑定的方式二：
         * addEventListener()
         *     - 通过这个方法也可以为元素绑定响应函数
         *  - 参数：
         *         1.事件的字符串，不要on
         *         2.回调函数，当事件触发时该函数会被调用
         *         3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
         * 
         * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
         *     这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
         * 
         * 这个方法不支持IE8及以下的浏览器

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

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