当前位置: 首页 > Web前端 > HTML

DOM事件模型分析

时间:2023-04-02 19:52:41 HTML

1.什么是DOMDOM是“DocumentObjectModel”的缩写,中文译为“文档对象模型”。它是一个跨平台、跨语言的编程接口,将HTML、XHTML和XML文档映射成树状结构,树的每个节点都是一个对象。正因为如此,面向对象的编程语言(如javascript)可以通过DOM对HTML、XHTML、XML文档进行操作。对于一个HTML文档,它的根节点是document对象,HTML元素是element对象,HTML元素的属性是attr对象。2、什么是DOM事件,如何响应?在浏览网页时,我们经常需要页面响应用户的操作。例如,点击“阅读全文”后,我们希望页面显示折叠的文本。按下Enter键后,浏览器提交填写的表单。各种用户操作是“事件”。事件发生在对象上,对象可能是DOM对象、BOM对象等。事件发生后,对象可能会做出反应,或者“什么都不做”。我们希望DOM元素响应事件。一般来说,有两种方法:i.事件属性事件属性是一种特殊的属性,它的值指定了相应事件发生时需要执行的javascript脚本。示例:在上面的button标签中添加事件属性onclick,其值为"console.log('buttonclicked!')",指定当元素被鼠标点击时,控制台输出'buttonclicked'。ii.addEventListener()方法EventTarget.addEventListener()方法将指定的监听器注册到EventTarget,当对象触发指定的事件时,将执行指定的回调函数。EventTarget可以是元素对象、文档对象或任何其他支持事件的对象。示例://在脚本中varmybutton=document.getElementById('mybutton');mybutton.addEventListener('click',function(e){console.log('按钮被点击了!');});上面的例子为button元素注册了一个click事件的监听器,并指定在指定事件时触发控制台输出'buttonclicked'。3.DOM事件模型在讲解DOM事件模型之前,先用一个例子来做介绍。请看下面的html文件:DOM事件模型

</body>这里为id分别为outer、inner1、inner2、core的4个元素定义了事件属性。元素被点击后,控制台会输出它的id。现在问题来了:如果我点击核心元素,控制台会输出什么?当点击核心元素时,由于核心元素包含在inner2元素中,所以也点击了inner2元素;同理,inner2元素包含在外层元素中,那么外层元素也被点击。这样的话,会触发哪个元素的点击事件,还是三个都会触发?如果这三个都被触发,它们的触发顺序是什么?我在火狐浏览器做了一个实验,控制台输出如下:coreinner2outer也就是说,这三个事件都被触发了,而且是“由内向外”触发的。接下来我们再做一个有趣的实验:我们对上面的html文件做一个小改动,将核心元素的样式从左起改为:50px;向左:-250px;这时候我们会发现核心是inner2的子节点,但是因为我们定义了“怪异”的样式,所以跑到了inner1。现在我们再次用鼠标点击core,观察控制台的输出:coreinner2outer和刚才的结果完全一样!虽然inner1看起来被点击了,但它的点击事件并没有触发;相反,inner2元素的click事件(似乎未被单击)会触发。看起来是核心元素的点击事件被触发后,点击事件逐层“传播”到父节点。为了解释刚才的实验结果,该开始解释DOM事件模型了。当一个事件发生时,该事件向上传播DOM树。传播分为两个阶段:i.捕获阶段在这个阶段,事件从根节点(即文档节点)向下传播,直到事件源所在的元素。二.冒泡阶段在这个阶段,事件从事件源向上传播,直到根节点。举刚才的例子,事件传播的顺序是:文档捕获->html捕获->body捕获->外层捕获->inner2捕获->核心捕获->核心冒泡->inner2冒泡->外层冒泡->htmlbubbling->documentbubbling对于事件属性,事件默认在冒泡阶段触发。如果使用addEventListener()方法注册监听器,则可以指定是在捕获阶段还是冒泡阶段触发事件:如果最后一个参数为false(默认值),则在冒泡阶段触发事件;如果为真,则在捕获阶段触发事件。一般来说,我们推荐使用addEventListener()方法来注册监听器,尽量不要使用事件属性。因为事件属性不利于行为和结构的分离,使得代码难以维护。