————————————————————————————————————————————

事件

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

文档或浏览器窗口中发生一些特定的交互瞬间，我们可以通过侦听器（或处理程序）来预定事件，以便事件发生的时候执行相应的代码

基本概念：

• 事件类型（事件名字）：说明发生什么类型事件的而字符串
• 事件目标：事件目标是发生的事件或与之相关的对象，必须同时指定类型和目标。Window、Document、Element对象是常见的事件目标，但某些事件也由其他类型的对象触发
• 事件处理程序、事件监听程序：响应某个事件的函数被称为事件处理程序或事件侦听器
• 事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象，事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。每个事件类型都为其相关的事件对象定义一组属性。
• 事件传播：浏览器决定哪个对象触发其事件处理程序的过程。

事件模型：

• 内联模型：
  • 事件处理函数是HTML标签的一个属性，用于处理指定事件
• 脚本模型：
  • 在JavaScript中处理事件，但无法同时处理多个相同的点击事件
• DOM2

  模型：
  • "DOM2级事件"定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。IE兼容性问题

调用事件三种模型写法

1  2  3  4  5      6      7  8  9 10     11     12     13     14 15     
     16     
     17     53 54 55 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

传统事件类型：

• 鼠标事件
• 键盘事件
• 事件对象 Event IE兼容性问题
  • 常量
  • 属性
    • bubbles 返回布尔值，指示事件是否是起泡事件类型
    • cancelable 返回布尔值，指示事件是否可拥可取消的默认动作
    • currentTarget 返回其事件监听器触发该事件的元素
    • eventPhase 返回事件传播的当前阶段
    • target 返回触发此事件的元素（事件的目标节点）
    • timeStamp 返回事件生成的日期和时间
    • type 返回当前 Event 对象表示的事件的名称。
  • 方法
    • initEvent() 初始化新创建的 Event 对象的属性
    • preventDefault() 通知浏览器不要执行与事件关联的默认动作
    • stopPropagation() 不再派发事件。

target和currentTarget区别：

1  2  3  4  5      6      7  8  9 10     
     
      11         
      12     
     
13     46 47 48 

eventPhase

1  2  3  4  5      6      7  8  9 10     
     
      11         
      12     
     
13     50 51 52 

• 目标事件对象
• 框架/对象事件
• 表单事件
• 剪贴板事件
• 打印事件
• 拖动事件
• 动画事件
• 过渡时间
• 其他事件
• 事件监听对象
• 文档事件对象
• 鼠标/键盘事件对象

事件流：

• 事件流描述的是从页面中接收事件的顺序
• 当几个都具有时间的元素层叠在一起时，点击其中一个元素，所有的元素都会触发事件
• 两种模式
  • 冒泡：从里往外逐个触发（主流浏览器、IE）
  • 捕获：从外往里逐个触发（Netscape）

  p.s.浏览器现在默认为冒泡模型，使用DOM2级模型的事件绑定机制才能手动定义事件流模式

冒泡事件流

1  2  3  4  5      6      7  8  9 10     
     
      11         
      12     
     
13     43 44 45 

绑定事件和移除事件

1  2  3  4  5      6      7  8  9 10     
     
      11         
      12     
     
13     50 51 52 

事件兼容： IE兼容性问题

• 事件绑定:addEventListener与attachEvent
• 事件移除:removeEventListener与detachEvent
• 获取事件对象:e.target与 window.event.srcElement
• 阻止冒泡:e.stopPropagation与window.event.cancelBubble
• 阻止默认:e.preventDefault与window.event.returnValue

封装兼容事件后调用

1 var EventUtil = { 2     // 检测绑定事件 3     addHandler: function(element, type, handler) 4     // 传入事件元素,事件类型,执行程序 5     { 6         if (element.addEventListener) { 7             element.addEventListener(type, handler, false); 8         } 9         // ie浏览器10         else if (element.attachEvent) {11             element.attachEvent('on' + type, handler); // 在ie浏览器事件要加上on12         }13         // 都不行的话使用DOM0模型,直接脚本模式执行14         else {15             element['on' + type] = handler;16         }17     },18     removeHandler: function(element, type, handler) {19         if (element.removeEventListener) {20             element.removeEventListener(type, handler, false);21         } else if (element.detachEvent) {22             element.detachEvent('on' + type, handler);23         } else {24             element['on' + type] = null;25         }26     },27     // 获得事件28     getEvent: function(event) {29         if (event) {30             return event;31         } else {32             return window.event;33         }34         // return event?event:window.event;35     },36     // 获得Target37     getTarget: function(event) {38         return event.target || event.srcElement;39     },40     // 取消默认行为41     preventDefault: function(event) {42         if (event.preventDefault) {43             event.preventDefault();44         } else {45             event.returnValue = false;46         }47     },48     // 取消冒泡49     stopPropagation: function(event) {50         if (event.stopPropagation) {51             event.stopPropagation();52         } else {53             event.cancelBubble = true;54         }55     },56 }

1  2  3  4  5      6      7  8  9 10     
     
      11         
      12     
     
13     取消默认链接14     45 46 47