DOM0事件:
特点:
-
所有DOM0事件都有
on
作为开头<input onclick="test()"/>
-
清理DOM0事件时,只需给该事件赋值为 null
input.onclick = null
-
同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数
-
不存在兼容性问题
常见的事件:
onchange
域的内容被改变(下拉列表选择改变)onclick
当用户点击某个对象时调用的事件ondblclick
当用户双击某个对象时调用的事件onfocus
元素获得焦点onblur
元素失去焦点onkeydown
键盘上某个按键被按下onkeyup
键盘上某个按键被松开onkeypress
键盘上某个按键被按下并松开onload
一张页面或一幅图像完成加载onmousedown
鼠标按钮被按下onmouseup
鼠标按键被松开onmouseover
鼠标移到某元素之上onmouseout
鼠标从某元素移开onmousemove
鼠标被移动onreset
重置按钮被点击, 引发Form重置事件onresize
窗口(body)或框架被重新调整大小onsubmit
确认(提交)按钮被点击, 引发Form提交事件onunload
(body)用户退出(刷新)页面
DOM2事件:
特点:
-
DOM2 事件是通过 addEventListener 绑定的事件
addEventListener() //可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用
-
同一个元素的同种事件可以绑定多个函数,按照绑定顺序执行
function a() { ... } function b() { ... } input.addEventListener( "click" ,a) input.addEventListener( "click" ,b)
-
清除 dom2 事件时,使用 removeEventListener
input.removeEventListener( "click" ,a) //不能移除匿名添加的函数
三个参数:
- 第一个参数是事件名(如click)
- 第二个参数是事件处理程序函数
- 第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用
事件:事件捕获阶段、处于目标阶段和事件冒泡阶段
事件冒泡和事件捕获
DOM2级事件处理添加进去的事件,我们可以控制事件的冒泡或是捕获过程。当addEventListener方法的第三个参数为`true`时,表示只进行`事件捕获`,不执行事件冒泡,再捕获的过程中,触发途径标签的对应事件函数。当第三个参数为`false`,表示执行`事件冒泡`的过程(默认情况)
DOM3事件:
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型
全部类型:
- UI事件,当用户与页面上的元素交互时触发,如:load、scroll
- 焦点事件,当元素获得或失去焦点时触发,如:blur、focus
- 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dbclick、mouseup
- 滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel
- 文本事件,当在文档中输入文本时触发,如:textInput
- 键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress
- 合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart
- 变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified
- 同时DOM3级事件也允许使用者自定义一些事件
- cancelBubble可以取消事件冒泡
- stopPropagation可以取消事件冒泡和下沉
几种事件绑定方式对比
DOM | DOM2 | IE | |
---|---|---|---|
事件名 | 事件名以“on”开头 | 事件名前没有“on” | 事件名以“on”开头 |
冒泡 | 支持 | 支持,最后属性设为false | 支持 |
捕获 | 不支持 | 支持,最后属性设为true | 不支持 |
阻止冒泡 | event.stopPropagation() | event.stopPropagation( ) | event.cancelBubble=true |
多处理程序注册 | 不支持 | 支持 | 支持,执行顺序与注册顺序相反 |
删除事件绑定 | 设置为空或null | 用处理程序名删除,匿名绑定不能删除 | 用处理程序名删除,匿名绑定不能删除 |
兼容性 | 全兼容 | 非IE | IE |