DOM事件主要内容

• 事件流
• 事件注册
• 事件对象
• 事件分类
• 事件代理

什么是DOM事件?

• 事件是某个行为或者触发，比如点击、鼠标移动
• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当用户触发按键时...

事件流

事件流

• capture phase捕获事件
  • 事件对象通过目标的祖先从传播窗口到目标的父。这个阶段也被称为捕获阶段
• target phase
  • DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
• bubble phase 冒泡
  • IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

参考资料: 事件流

事件注册与触发

在讲述事件注册之前,讲一下前面的事件处理程序

• HTML内联方式
  • 存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
  • 这样书写html代码和JavaScript代码紧密耦合，维护不方便

<input type="button" value="Click Here" onclick="alert('Clicked!');" />

• JavaScript指定事件处理程序
  • 把一个方法赋值给一个元素的事件处理程序属性。
  • 可以删除事件处理程序，只需把元素的onclick属性赋为null即可

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

事件注册(DOM2事件处理程序)

• eventTarget.addEventListener(type,listener[,useCapture])
  • 事件类型
  • 事件处理方法
  • 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

var elem = document.getElementById("div1")
var clickHandler = function(){
  //to do
}
elem.addEventListener('click',clickHandler,false)

取消事件注册

• eventTarget.removeEventListener(type,listener[,useCapture])
  • 事件类型
  • 事件处理方法
  • 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是

elem.removeEventListener('click',clickHandler,false)
elem.onclick = null

事件触发

• eventTarget.dispatchEvent(type)

elem.dispatch("click")

浏览器兼容性(IE6 7 8)

事件注册与取消

IE并不支持addEventListener和removeEventListener方法，而是实现了两个类似的方法

• attachEvent
• detachEvent
  这两个方法都接收两个相同的参数
  • 事件处理程序名称
  • 事件处理程序方法

事件触发

• fireEvent(e)

no capture没有捕获

兼容性

事件对象(共有的)

当事件被触发的时候,会调用事件处理函数,在调用时间处理函数中,有一些信息,这些信息代表着事件的状态,这个就是事件对象

以click为例

• 属性
  • type类型:例如点击什么的...
  • target(srcElement IE低版本)目标元素,点击哪个就是那个
  • currentTarget:事件处理程序当前处理元素
• 方法
  • stopPropagation()取消事件进一步捕获或冒泡
  • preventDefault()取消事件默认行为

阻止事件传播(冒泡)

• event.stopPropagation()W3C
• event.cancelBubble=trueIE

默认行为

• event.preventDefault()W3C
• event.returnValue = false IE

事件分类

事件种类

MouseEvent

MouseEvent对象

• 属性
  • clientX, clientY位置
  • screenX, screenY
  • ctrlKey,shiftKey,altKey,metaKey
  • button(0,1,2)鼠标左键还是右键还是滚轮

MouseEvent事件顺序

顺序

WheelEvent滚轮事件

FocusEvent 元素获得焦点和失去焦点

• 属性
  • relatedTarget当一个元素失去焦点,另一个元素就会获得焦点

InputEvent 输入事件(W3C)

• onpropertychange(ie)

KeyboardEvent键盘事件

• 属性
  • key按下什么键,值是字符串
  • code
  • ctrlKey,shiftKey,altKey,metaKey
  • repeat持续按一个键

Event

<image alt = "photo" src = "www.baidu.com" onerror = "this.src = 'www.wangyi.com'"/>

UIEvent

事件代理

参考我写的另一片文章 从onClick谈事件代理和了解事件传播机制

总结一下不能冒泡的事件:

• mouseenter
• mouseleave
• blur
• focus
• focusin
• focusout
• load
• unload
• error
• select
• abort
• resize