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方式可绑定多次,拥有事件更多特性,推荐使用。