W3CDOM和事件模型之初见

最新推荐文章于 2020-09-09 10:47:51 发布

yczxwestwood

最新推荐文章于 2020-09-09 10:47:51 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程理论与实践文章标签： javascript 浏览器 button html mozilla input

本文链接：https://blog.youkuaiyun.com/yczxwestwood/article/details/6412580

编程理论与实践专栏收录该内容

19 篇文章

订阅专栏

本文介绍了JavaScript中的W3CDOM，包括DOM的基本操作如getElementById和getElementsByTagName，以及如何使用appendChild方法动态添加元素。此外，还讲解了事件模型，涵盖了传统模型和W3CDOM事件模型的区别，以及如何处理事件对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序：近来被老刘拉去参加一个需要使用javascript的比赛，但是一点也不明白，所以只能从0开始学起。这里先声明下，写这篇文章的起因是想对自己所学做个总结，而且哥的笔记纸用完了....由于可能在以后不会过多得使用，所以在学习过程中关注的重点在于常用性，所以可能很多地方会不完整或不正确，恳请大家及时指出。

一、W3C DOM

javascript是一种浏览器本身就支持的语言，就想HTML那样不需要tomcat这类web服务器的解析就能运行的浏览器原生语言，它最先被Netscape浏览器支持，所以现在的标准以及其他浏览器中很多javascript特性都或多或少延续了netscape的一些特性。这也是W3C DOM出台的原因，因为IE以及其它浏览器都以自己的方式来支持JS（javascript的简称，下同），所以需要W3C为其进行标准化工作。

从网页由元素组成的角度来看，在W3C DOM中，浏览器是一个以window对象为根的"元素树"模型，如下所示: (这是一个卧形的树）

window对象代表的是浏览器，而document对象为网页，form是表单，TextNode就是html标签之间的字符串；正是将这些HTML的元素(Element)对象化了，才使得javascript有的放矢，编程人员便可以通过js语言动态控制这些对象来达到一些目标，比如最常见的就是对注册信息的完整性以及格式正确性的实时检查。

Javascript提供了几个最基本的操作DOM对象的内置函数:

1、document.getElementById(id)

通过id来获得某一个element的对象引用,例如：

<p id="p_id">...</p> var pp=document.getElementById("p_id");//这样就能获得p元素的引用，然后就可以使用javascript访

问和修改对象的基本方法来完成后续工作

2、 document .getElementByTagName(tag_name)

通过tag_name获得所有与指定tag_name一样的element所组成的数组array，而javascript对array也提供了一套比较完备的函数和方法来操作它们，例如：

<input type="checkbox" >...<br/> <input type="checkbox" >...<br/> var checkboxes=document.getElementByTagName("input"); //checkboxes是一个组数

注：除了上述那两个基本的函数，还有一些比较常用的对象及其方法，这些对象和方法的调用规则遵循标准的面向对象规定，除了window的直接方法和孩子是不需要使用"window."前缀以外。所以经常能看到alert(...)这种直接调用形式而不是window.alert()这种完整形式。而在获得表单元素以及下属元素时，也可以使用另外一种方式来代替getElement方法，即：

<form action="#" id="form_test"> <input type="button" name="button_name" value="test_bt" /> </form> <mce:script type="text/javascript"></mce:script> 就是通过name来获取表单中的元素

3、结点模型

实际上，W3C DOM对浏览器最本质的抽象是一颗以window为根的结点树，共有12种不同类型的结点，其中7种是可以直接在HTML中使用的，而其它5中应用在XML中。在这7种类型的结点中有三种是常用的：元素(element)、文本(text)和文档(document)，并且得到了几乎所有浏览器的支持（除了mozilla，很多浏览器都只实现了7种中的三种）。W3C DOM为结点定义了一系列的方法和属性，其中最常用的就是 appendChild方法，应用场景是在网页中动态添加一个标签。比如在填写注册表单时，若填写错误就会在这栏后添加一个文字提醒：

var element=document.createElement("spn")//创建一个span标签元素 var textnode=docuement.createTextNode("字符串"); //创建一个字符串结点 element.appendChild(textnode); //将textnode结点加为p element的孩子结点 document.getElementById("p_id").appendchild(element) ;//在p中加入span元素为其孩子

在这里再说说document.write这个document的内置方法。它并不是在这个网页的最后添加一行，而是会将整个网页的内容全部被替换成write的参数字符串，使用时需要特别小心。

二、事件模型

1、传统的事件模型

就是将事件当做一个HTML元素的属性来对待，比如需要为button 注册一个onclick事件处理函数，则使用如下形式来注册：

<mce:script type="text/javascript"></mce:script> <input type="button" onclick="click_handler"/>

2、W3C DOM事件模型之事件对象

传统的事件模型的缺点是不能给一个网页元素的同一事件同时注册多个事件响应函数，而且在事件传播模型中，IE和其他浏览器又有差别，这又需要W3C来插足了~ 在W3C DOM level 2中引进了事件对象以及相关的函数。事件对象是在触发事件而自动调用相应事件处理函数时创建的临时变量，即事件处理函数的形参。这个变量有自己的属性和方法，比如有记录事件发生时按键的keycode，鼠标点击的键和所在的坐标，事件触发的元素，事件的类型等。比如禁止鼠标右键：

<head> <title>禁止鼠标右键</title> <mce:script type="text/javascript"></mce:script> </head>

当点击鼠标右键时，e被自动实参化，它就是建立的event引用。

3、 W3C DOM事件模型之事件传播

这里的传播指的是”事件对象“的传播，一共有两种传播模式，如下图所示:

A）冒泡模式(Bubble)

IE浏览器只支持这种形式的传播，即事件对象从事件触发的目标（target）开始，一直传播到侦听同样事件类型的target祖先结点为止。即作为全局变量的时间对象沿着”元素树“向上传播

比如，若body和其中的button元素都注册了onclick事件( onclick="xxx()"），则在冒泡模型中，首先会调用button注册的事件响应函数，再执行body的。有时，为了阻止事件的传播，可以