itfan123什么是DOM0，DOM1，DOM2，DOM3及他们的区别
原创DOM （Document Object Model)文档对象模型
关于JS事件
- JS该程序使用事件驱动的设计模式向元素添加事件侦听功能。当该元素对应的事件被触发时，会调用添加的事件监听函数。
- 事件是JS和HTML交互的基础是通过绑定事件进行交互，这是在文档或浏览器窗口中发生的任何交互。
- 所有浏览器都支持DOM0级别事件处理程序，当使用此方法时，事件处理在元素的作用域中运行，因此this都指向那个元素。
什么是DOM0，1，2，3 ？
在W3C由协会设立DOM标准中，DOM标准可以分为DOM1，DOM2，DOM3三个版本。
事实上，DOM0等级标准不存在，所谓DOM0只是DOM历史坐标中的参考点。
- DOM1主要的定义是HTML和XML文档的底层结构
- DOM2和DOM3在该结构的基础上分别引入更多的交互功能，如扩展API，还支持更高级的XML特性
DOM0
开始时，浏览器只处理原始事件模型中的事件，例如，直接在HTML标签上的绑定事件 onclick
或者获取DOM节点后绑定事件
document.getElementById("myButton").onclick = function () {
alert(thanks);
}在js中html元素有一个对应的对象，这个对象的属性对应于那个html元素的性质，因此可以使用它。js该代码添加了事件侦听功能。
无论用html还是js，是给文档元素赋值一个函数，当调用事件监听函数时，它被调用为产生事件的元素的Release方法，所以this引用该目标元素(例子中的Input对象)。
DOM1
DOM1级于1998年10月1日成为W3C推荐的标准。
DOM1该标准没有定义与事件相关的内容，因此没有所谓的DOM1事件模型
DOM2
DOM2在中，当事件发生在节点上时，目标元素的事件处理程序被触发，事件传播分为三个阶段。也就是。 捕获阶段、事件处理阶段、冒泡阶段。 。
- 在捕获阶段，事件来自DOM对象沿着文档树向下传播到节点。如果目标的任何父元素注册了事件侦听函数，则这些函数将在事件传播期间运行。
- 在事件处理阶段，运行目标节点上注册的事件监听功能。
- 在冒泡阶段，事件从目标元素向上传播回来DOM对象(与捕获阶段相对)。
事件对象
在触发DOM上的事件时生成事件对象 event ，此对象包含与事件相关的所有信息。
DOM2注册和销毁事件监听函数
DOM2在事件模型中，通过调用对象的 addEventListner() 方法设置元素的事件侦听函数，即仅通过此API只有注册函数才能触发上述事件传播的三个阶段。
addEventListener 参数
- 第一个参数是
String类型，是调用事件的名称，和。DOM0级别不同，因为不需要前缀。on，如注册click事件就传入click而不是onclick - 第二个参数是被调用时的回调函数。JS传递回函数1
event对象，则此对象包含有关该事件的所有详细信息(如果调用该对象)。stopPropagation()方法，则组织该活动以进一步传播。 - 第三个参数是
boolean类型，true表示事件侦听功能能够捕获这三个阶段中的任何一个阶段的事件，false表示事件监听功能在捕获阶段不能再捕获事件(性能相同)。DOM0）。
使用 removeEventListener() 方法来移除该事件处理程序。
DOM2中的event对象
- type :发生的事件的类型，例如"click", “mouseover”
- target :事件发生的节点，可能是currentTarget不同
- currentTarget :正在处理事件的节点(如果在)。capturing阶段和冒泡阶段处理事件，此属性与target属性是不同的。此属性应改为在事件侦听函数中使用this
- stopPropagation ():您可以阻止事件从当前正在处理该事件的节点传播。
- preventDefault ():阻止浏览器执行与事件相关的默认操作，方法是0级DOM中返回false一样
- clientX , clientY :鼠标相对于浏览器。x坐标y坐标
- screenX , screenY :鼠标相对于显示屏的左上角。x坐标y坐标
DOM0和DOM2的区别
DOM0已注册的事件处理程序将被覆盖。
与上面的代码一样，有两个DOM0该方法绑定到相同的元素。 click事件 。
事实上，当该按钮被点击时，它将只打印 222 ，因为后注册函数覆盖先前的处理函数。
DOM2注册的事件处理程序不会被覆盖，而是按顺序执行。
Powered By Z-BlogPHP Theme By 编程老白