DOM0级事件和DOM2级事件

DOM 0级事件

DOM 0级事件监听：把一个函数赋值给一个事件的处理程序属性

事件绑定

侵入式

<input name="ruby" onclick=function />

无侵入式

事件源.on事件 = function () {}

事件类型

表单事件

• onblur ：失去焦点
• onfocus ：获取焦点
• onchange ：内容改变
• onselect ：被选中事件

键盘事件

• onkeydown ：键盘按下
• onkeyon ：键盘抬起
• onkeypress ：键盘按下

鼠标事件

• onclick ：点击
• dbclick ：双击
• mouseover ：鼠标滑过
• mouseout ：鼠标滑出
• mouseenter ：鼠标进入
• mouseleave ：鼠标离开
• mousedown ：鼠标左键按下
• mouseup ：鼠标左键抬起
• mousewheel ：鼠标滚轮滚动

DOM 2级事件

事件绑定

事件源.addEventListener(事件, function() {})

事件类型

表单事件

• focus ：获得焦点
• blur ：失去焦点
• input ：用户输入事件

鼠标事件

• click ：鼠标点击
• mouseenter ：鼠标经过
• mouseleave ：鼠标离开

键盘事件

• keydown ：键盘按下触发
• keyup ：键盘抬起触发

DOM 0级和DOM 2级的区别

DOM 0级事件的事件绑定原理是给当前元素的某一私有属性赋值。所以只能给当前的DOM元素的某一个事件行为赋值一个方法。如果多次赋值，则会执行最后一次赋值的方法。

DOM 2级事件是通过使用在eventTarget原型上定义的addEventListener/attachEvent方法来完成事件绑定，且执行事件方法的。当DOM元素绑定事件后，浏览器则会给当前元素的事件行为开辟一个事件池。这样当DOM元素的行为被触发，浏览器就会到对应的事件池，将事件池中的方法全部执行。

总结：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用。