1.DOM 事件的级别

  • DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。
  • 而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。
  • 由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

image.png
image.png

1.1.DOM 0级事件

  • 0级是最早的，而且目前所有的浏览器仍支持0级DOM模型。
  • 缺点是一个事件的处理程序只能对应一个函数
  • 删除 DOM 0级事件处理程序，只要将对应事件属性置为null即可。

写法有两种

  • 在标签内写onclick事件

    1. <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

  • 在JS写onlicke=function（）{}函数

    1. document.getElementById("myButton").onclick = function () {
    2.   alert('thanks');
    3. }

    1.2.DOM 2级事件

  • [x] 在2级模型中可以为特定对象的事件注册多个事件监听。

  • [x] DOM 2级事件的由来就是网景和IE对于DOM事件的调用顺序出了两种，后来 W3C 统一了一下，也就是后来的 DOM 2级事件了

    1. el.attachEvent('onclick',fn) // 冒泡(IE5),儿子=>爸爸=>爷爷
    2. el.addEventListener('click',fn) // 捕获(网景)，爷爷=>爸爸=>儿子
    3. el.addEventListener('click',fn,bool) // W3C,bool为true捕获，为false冒泡(或什么都不写)

  • [x] 2级事件的删除：

    1. el.removeEventListener("click",fn,bool)

  • 另外2级DOM事件包含三个阶段

  1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
  2. 目标阶段：真正的目标节点正在处理事件的阶段；
  3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

    1.2.DOM 3级事件

    DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。
  • UI事件，当用户与页面上的元素交互时触发，如：load、scroll
  • 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
  • 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
  • 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
  • 文本事件，当在文档中输入文本时触发，如：textInput
  • 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
  • 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
  • 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
  • 同时DOM3级事件也允许使用者自定义一些事件。