事件 P346页-白红宇

事件 P346页

阅读量：6345 次

发布时间：2019-06-22

本文共 2442 字，大约阅读时间需要 8 分钟。

事件流：从页面接收事件的顺序

1、事件冒泡：IE的事件流，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

2、事件捕获：Netscape Communicator团队提出的另一种事件流。与事件冒泡方向相反。

3、DOM事件流

‘DOM2级事件’规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件处理程序

事件处理程序的名字以‘on’开头

1、HTML事件处理程序含‘on’

2、DOM0级事件处理程序含‘on’

3、DOM2级事件处理程序：addEventListener()、removeEventListener()

接受三个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值

其中布尔值参数为true，表示在捕获阶段调用事件处理程序；若为false，表示冒泡阶段调用事件处理程序。

4、IE事件处理程序：attachEvent()、detachEvent()

接受两个参数：事件处理程序名称、事件处理程序函数含‘on’

attachEvent()方法和addEventListener()方法类似，可以为一个元素添加多个事件处理程序。但是触发事件的顺序相反

5、跨浏览器的事件处理程序*** addHandler() removeHandler() 。。。。详见P354页、P361页、P373页、P374页、

EventUtil的用法如下：

var EventUtil={
      addHandler:function (element,type,handler) {
           if(element.addEventListener){
               element.addEventListener(type,handler,false)          }else if(div.attachEvent){
               element.attachEvent('on'+type,handler)          }else {
               element['on'+type]=handler;          }     },     removeHandler:function (element,type,handler) {
          if(element.removeEventListener){
              element.removeEventListener(type,handler,false)         }else if(div.detachEvent){
              element.detachEvent('on'+type,handler)         }else {
              element['on'+type]=null;         }     },     getEvent:function (event) {
          return event?event:event.srcElement;     },     getTarget:function (event) {
          return event.target||event.srcElement;     },     getRelatedTarget:function (event) {
          if(event.relatedTarget){
              return event.relatedTarget;         }else if(event.toElement){
              return event.toElement;         }else if(event.fromElement){
              return event.fromElement;         }else {
              return null;         }     },     getButton:function (event) {
          if(document.implementation.hasFeature('MouseEvent','2.0')){
              return event.button;         }else {
              switch (event.button){
                  case 0:                 case 1:                 case 3:                 case 5:                 case 7:                     return 0;                 case 2:                 case 6:                     return 2;                 case 4:                     return 1;             }         }     } };