事件类型——事件第三层

第三层：

1、事件类型：

                 传统事件类型

                 Window事件

                 鼠标事件

                 键盘事件

                 DOM事件

                 HTML5事件

                 触摸屏和移动设备事件

2、注册事件处理程序：

设置HTML标签属性为事件处理程序：this是window   

                 设置JavaScript对象属性为事件处理程序 ：每个事件目标对于每种事件类型将最多只有一个处理程序

                 addEventListener() ：可以为同一个对象注册同一事件类型的多个处理程序函数，可以设置捕获事件：最有这个布尔值参数是true，表示在捕获 阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序

                 attachEvent() ：在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window

       function addEventHandler(objectelement, eventname, eventhandler) {
            if (document.attachEvent)//ie浏览器
            {
                objectelement.attachEvent("on" + eventname, eventhandler);
            }
            else if (document.addEventListener) //非ie浏览器
            {
                objectelement.addEventListener(eventname, eventhandler, false);
            }
        }

3、事件处理程序的调用：

              A、事件处理程序和事件对象的关系：

                               a、通常调用事件处理程序时把事件对象作为它们的一个参数。（有一个例外）

                               b、事件对象的属性提供了有关事件的详细信息。例如，type属性制订了发生的事件类型。

                               c、 例外是：IE8以前，设置属性注册事件处理程序，当调用时它们时并未传递事件对象。需要通过全局对象window.event来获得事件对象。

             B、事件处理程序和事件目标的关系： 

                               事件处理程序在事件目标中定义的，所以它们作为这个对象的方法来调用。this关键字指的是事件目标。

4、事件传播：

             A、产生事件传播： 当事件目标是Window对象或其他一些单独对象（XMLHttpRequest)时，浏览器简单的通过调用对象上适当的处理程序响应事件。

                                                当事件目标是文档或文档元素时，情况比较复杂。

             B、 事件传播三个阶段：

                                 a、捕获阶段：反向冒泡阶段，最先调用Window对象的捕获处理程序，然后是Document对象，接着是body对象的，DOM树，直到调用事件目标的                                                                            父元素的捕获事件处理程序。在目标对象本身上注册捕获事件处理程序不会被调用。

                                                           用于：程序调试，事件取消技术，过滤掉事件从而使目标事件处理程序绝不会被调用。

                                  b、第二个阶段：目标对象本身的事件处理程序调用。

                                  c、第三个阶段：事件冒泡

                                       事件冒泡： 

                                  a在调用在目标元素上注册事件处理函数后，大部分事件会冒泡到DOM树根：

                                  b这个过程是： 调用目标的父元素的事件处理程序，然后调用在目标哦的祖父元素上注册的事件处理程序。会一直到Document对象，最后 到Window对象。

                                   c目的是：事件冒泡为在大量单独文档元素上注册处理程序提供了方案，在共同的祖先上注册一个处理程序来处理所有的事件。

5、事件取消：

             A、取消事件相关默认操作三种方法

//阻止浏览器的默认行为
function stopDefault(e) {
  //阻止默认浏览器动作（W3C）
  if (e && e.preventDefault)
     e.preventDefault();
  //IE中阻止函数器默认动作方式
  else
      window.event.returnValue = false;
  return false;
}

           B、取消事件传播

function stopBubble(e){
//如果提供了事件对象，则这是一个非IE浏览器
if (e && e.stopPropagaation)
  //因此它支持w3c的stopPropagation()方法
  e.stopPropagation();
else
  //否则，需要使用IE的方式来取消事件冒泡
  window.event.cancelBubble = true;
}

                            调用对象stopPropagation()方法（在支持addEventListener()浏览器中）

                            IE事件对象设置cancelBubble属性为true。

           *DOM事件规范草案在Event对象上定义其他方法或属性：

            stopImmediatePropagation()。此方法阻止了任何其他对象的事件传播，但也阻止了在相同对象上注册的任何其他事件处理程序的调用（stopPropagation()是不阻止的）
            defaultPrevented。常态下这个属性是false，但如果preventDefault()被调用则它将变成true.