DOM事件处理总结

事件流

事件流分为三个阶段

• 捕获阶段，自顶向下到目标元素
• 处于目标阶段
• 冒泡阶段，自底向上到document

HTML事件处理程序

最熟悉的方法，直接在HTML里面写死绑定。

<input type="button" value="click" onclick="showMessage()">

这种方法最简单，但是存在问题：

• HTML和JS紧密耦合，可修改性不好。
• 在JS没加载完之前用户点击了按钮，会弹出错误，很丑。

DOM0级事件处理程序

也很简单，且被浏览器支持的很好。

var btn = document.getElementById('btn');
btn.onclick=function(){/*...*/};

特点如下：

• this是引用当前元素
• 事件在冒泡阶段被处理

DOM2级事件处理程序

定义了所有DOM节点都必须有两个方法：

• addEventListener()
• removeEventListener()

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){/*...*/});

这两个方法都有三个参数(type, listener[, useCapture])

• type:事件名
• listener: 想添加的回调事件
• useCapture: 若在捕获阶段调用事件处理程序

特点如下：

• this引用当前元素
• 可以指定事件在冒泡阶段或捕获阶段被处理
• 可以添加多个事件处理程序

IE事件处理程序

• attachEvent()
• detachEvent()

懒得记了，希望以后微软可以少参和前端。

事件对象

所有事件处理程序都可以接收一个event对象入参，html事件处理程序可以手动将event传入。

event对象代表了本次事件，属性都为只读，只能通过方法来改变事件，重要的属性和方法有：

• type 事件类型
• currentTarget 事件元素目标
• stopPropagation() 阻止冒泡
• bubbles若可以冒泡
• preventDefault()阻止默认行为
• cancelable若可以阻止默认行为

事件处理程序中，this总等于event.currentTarget。

事件类型

事件类型指event.type中可以出现的值，也是可以绑定事件处理程序的值。

1. 鼠标事件
   • click
   • dbclick
   • mousedown
   • mouseout
   • mouseover
   • mouseup
   • mousemove
2. 键盘事件
   • keydown
   • keypress
   • keyup
3. html事件
   • load
   • unload
   • abort
   • error
   • select
   • change
   • submit
   • reset
   • resize
   • focus
   • blur
4. DOM事件
5. 其他特有非标准事件，比如触摸，横屏等