DOM0、DOM1、DOM2、DOM3级事件的区别 - 之 DOM0事件 - 易塔云建站-模板下载,web开发资源,技术博客

DOM0、DOM1、DOM2、DOM3级事件的区别 - 之 DOM0事件发布于：2021-02-24 20:28:03 来源：知乎查看：7 讨论：0

DOM级别：分为0，1，2，3。
DOM0：一般把onclick直接写在HTML中，就是DOM0。
DOM1：1998年10月成为W3C推荐的标准。由两个模块组成：DOM Core和DOM HTML。DOM核心规定如何映射XML文档结构。DOM HTML是在核心基础上扩展了对HTML的对象和方法。
DOM2：扩展了鼠标和用户界面事件、范围、遍历等细分模块，而且通过对象接口增加了对CSS的支持。DOM2级的新模块定义：
□：DOM视图（DOM Views） - 定义了跟踪不同文档视图的接口；
□：DOM事件（DOM Events） - 定义了事件和事件处理接口；
□：DOM样式（DOM Style） - 定义了基于CSS为元素应用样式的接口；
□：DOM遍历和范围（DOM Traversal and Range） - 定义了遍历和操作文档树的接口。
DOM3：
□：引入了统一方式加载和保存文档的方法 - 在DOM加载和保存模块中定义（DOM Load and Save）；
□：新增了验证文档的方法 - 在DOM验证模块中定义（DOM Validation）；
事件：是JavaScript和HTML交互的基础。任何文档和浏览器窗口发生的交互，都要通过绑定事件进行。
可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员的模型，支持页面的行为（JavaScript代码）与页面的外观（HTML和CSS代码）之间的松散耦合。
事件最早是在IE3和Netscape navigator 2中出现的，当时是作为分担服务器运算负载的一种手段。
在IE4和Netscape 4发布时，这两种浏览器都提供了相似但不相同的API。后来DOM2级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。
目前所有浏览器都实现了DOM2级事件，但这个规范本身并没有涵盖所有事件类型。
浏览器对象模型（BOM）也支持一些事件，与文档对象模型（DOM）事件之间的关系并不太清晰。
后来DOM3级的出现，让增强后的DOM事件API更加繁琐。有时候使用事件很简单，有时候则非常复杂，难易程度因需求而不同。

事件处理程序：

事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload，mouseover的事件处理程序就是onmouseover等等。
一、DOM0是第四代浏览器，也就是传统处理事件的程序执行方式：将一个函数复制给一个事件处理程序属性。现在依然再用。原因：
1，简单；
2，跨浏览器优势；

var btn = document.getElementById("mybtn");
btn.onclick = function(){
console.log("Clicked")
}

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这个事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用着当前的元素。

var btn = document.getElementById("mybtn");
btn.onclick = function(){
console.log(this) //<input type="button" onclick="console.log(111)" value="请点击" id="mybtn">
console.log(this.id) //mybtn
}

不仅仅是ID，可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。删除通过DOM0级方法指定的事件处理程序：

btn.onclick = null; //删除事件处理程序

在HTML中定义的事件也可以包含要执行的具体动作函数，从而调用在其他地方定义的脚本。

<input type="button" onclick="showMessage()"  value="请点击" />
<script>
    function showMessage(){
        alert("Hello World!")
    }
</script>

当然你也可以包含一个外部文件。这样指定的处理程序会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。

通过event变量，可以直接访问事件对象，不用自己定义，也不用从函数的参数列表总读取。在这个函数内部，this值等于事件的目标元素：

如此一来就涉及到函数作用域的扩展问题，因为匿名函数能访问当前作用域和外部作用域的变量，所以这样的扩展类似于：

function(){
    with(document){
        with(this){
            //该元素的属性值或其他方法
        }
    }
}

那么这样的话，就可以更简单的访问此元素的属性：

那么如果，当前元素是一个表单form，则作用域中还会包含访问表单元素（父元素）的入口，这个函数就类似变为了：

function(){
    with(document){
        with(this.form){
            with(this){
                //该元素的属性值或其他方法
            }
        }
    }
}

最后，实际上，这样的作用域扩展方式，就是想让事件处理程序无需引用表单元素就能访问其他表单字段：

但是：DOM0记得指定事件处理程序有缺点三个：
□：时差问题。用户可能上来就点击触发，但是程序可能还没准备好执行条件；解决办法，封装在一个try-catch块中，以便错误不浮出水面：

□：这样扩展的作用域链在不同浏览器会导致不同结果。因为不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。
□：因为HTML与JavaScript代码紧密耦合。想改就麻烦点得改两处。进而转向DOM2级事件处理程序。

跳转到下一篇：DOM2级事件处理程序。
跳转到【事件流】

上一篇：理解 DOM 中的 NodeList、NamedNodeMap、HTMLCollection 下一篇：DOM0、DOM1、DOM2、DOM3级事件的区别 - 之 DOM2事件

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友