DOM0事件、 DOM2事件、DOM3事件、IE事件以及几种事件绑定方式对比

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

你可能感兴趣的:(JavaScript,DOM,javascript)