企业网站建设第一步,一级建造师价格最新行情,珠海工商年检到哪个网站做,上海网站制作公司是什么前端面试大全DOM 事件的传播机制
#x1f31f;经典真题
#x1f31f;事件与事件流
事件流
事件冒泡流
事件捕获流
标准 DOM 事件流
#x1f31f;事件委托
#x1f31f;真题解答
#x1f31f;总结 #x1f31f;经典真题
谈一谈事件委托以及冒泡原理
#x1f3…前端面试大全·DOM 事件的传播机制
经典真题
事件与事件流
事件流
事件冒泡流
事件捕获流
标准 DOM 事件流
事件委托
真题解答
总结 经典真题
谈一谈事件委托以及冒泡原理
事件与事件流
事件最早是在 IE3 和 NetscapeNavigator2 中出现的当时是作为分担服务器运算负担的一种手段。
要实现和网页的互动就需要通过 JavaScript 里面的事件来实现。
每次用户与一个网页进行交互例如点击链接按下一个按键或者移动鼠标时就会触发一个事件。我们的程序可以检测这些事件然后对此作出响应。从而形成一种交互。
这样可以使我们的页面变得更加的有意思而不仅仅像以前一样只能进行浏览。
在早期拨号上网的年代如果所有的功能都放在服务器端进行处理的话效率是非常低的。
所以 JavaScript 最初被设计出来就是用来解决这些问题的。通过允许一些功能在客户端处理以节省到服务器的往返时间。
JavaScript 中采用一个叫做事件监听器的东西来监听事件是否发生。这个事件监听器类似于一个通知当事件发生时事件监听器会让我们知道然后程序就可以做出相应的响应。
通过这种方式就可以避免让程序不断地去检查事件是否发生让程序在等待事件发生的同时可以继续做其他的任务。
事件流
当浏览器发展到第 4 代时IE4 及 Netscape4浏览器开发团队遇到了一个很有意思的问题页面的哪一部分会拥有某个特定的事件
想象在一张纸上的一组同心圆。如果把手指放在圆心上那么手指指向的不是一个圆而是纸上的所有圆。 好在两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。
如果单击了某个按钮他们都认为单击事件不仅仅发生在按钮上甚至也单击了整个页面。
但有意思的是IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。
IE 的事件流是事件冒泡流而 Netscape 的事件流是事件捕获流。
事件冒泡流
IE 的事件流叫做事件冒泡event bubbling即事件开始时由最具体的元素文档中嵌套层次最深的那个节点接收然后逐级向上传播到较为不具体的节点文档。
以下列 HTML 结构为例来说明事件冒泡。如下
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title/headbodydiv/div/body
/html
如果单击了页面中的 div 元素那么这个 click 事件沿 DOM 树向上传播在每一级节点上都会发生按照如下顺序进行传播
divbodyhtmldocument
所有现代浏览器都支持事件冒泡但在具体实现在还是有一些差别。
IE9、Firefox、Chrome、Safari 将事件一直冒泡到 window 对象。
我们可以通过下面的代码来查看文档具体的冒泡顺序示例如下
div idbox styleheight:100px;width:300px;background-color:pink;/div
button idreset还原/button
// IE8 以下浏览器返回 div body html document
// 其他浏览器返回 div body html document window
reset.onclick function () {history.go();
}
box.onclick function () {box.innerHTML div\n;
}
document.body.onclick function () {box.innerHTML body\n;
}
document.documentElement.onclick function () {box.innerHTML html\n;
}
document.onclick function () {box.innerHTML document\n;
}
window.onclick function () {box.innerHTML window\n;
}
在上面的示例中我们为 div 以及它的祖先元素绑定了点击事件由于事件冒泡的存在当我们点击 div 时所有祖先元素的点击事件也会被触发。
如下图所示 事件捕获流
Netscape Communicator 团队提出的另一种事件流叫做事件捕获event captruing。
事件捕获的思想是不太具体的节点应该更早接收到事件而最具体的节点应该最后接收到事件。
事件捕获的思想是在事件到达预定目标之前就捕获它。
以同样的 HTML 结构为例来说明事件捕获如下
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title/headbodydiv/div /body
/html
在事件捕获过程中document 对象首先接收到 click 事件然后事件沿 DOM 树依次向下一直传播到事件的实际目标即 div 元素
documenthtmlbodydiv
IE9、Firefox、Chrome、Safari 等现代浏览器都支持事件捕获但是也是从 window 对象开始捕获。
下面我们来演示一个事件捕获流的示例
div idbox styleheight:100px;width:300px;background-color:pink;/div
button idreset还原/button
// IE8 以下浏览器不支持
// 其他浏览器返回 window document html body div
reset.onclick function () {history.go();
}
box.addEventListener(click, function () {box.innerHTML div\n
}, true)
document.body.addEventListener(click, function () {box.innerHTML body\n;
}, true);
document.documentElement.addEventListener(click, function () {box.innerHTML html\n;
}, true);
document.addEventListener(click, function () {box.innerHTML document\n;
}, true);
window.addEventListener(click, function () {box.innerHTML window\n;
}, true);
在上面的示例中我们为 div 以及它所有的祖先元素绑定了点击事件使用的 addEventListener 的方式来绑定的事件并将第 2 个参数设置为了 true 表示使用事件捕获的方式来触发事件。
效果如下图所示 标准 DOM 事件流
DOM 标准采用的是捕获 冒泡的方式。
两种事件流都会触发 DOM 的所有对象从 document 对象开始也在 document 对象结束。
换句话说起点和终点都是 document 对象很多浏览器可以一直捕获 冒泡到 window 对象
DOM 事件流示意图 DOM 标准规定事件流包括三个阶段事件捕获阶段、处于目标阶段和事件冒泡阶段。 **事件捕获阶段**实际目标 div 在捕获阶段不会触发事件。捕获阶段从 window 开始然后到 document、html最后到 body 意味着捕获阶段结束。 **处于目标阶段**事件在 div 上发生并处理但是本次事件处理会被看成是冒泡阶段的一部分。 **冒泡阶段**事件又传播回文档。
事件委托
上面介绍了事件冒泡流事件冒泡一个最大的好处就是可以实现事件委托。
事件委托又被称之为事件代理。在 JavaScript 中添加到页面上的事件处理程序数量将直接关系到页面整体的运行性能。导致这一问题的原因是多方面的。
首先每个函数都是对象都会占用内存。内存中的对象越多性能就越差。其次必须事先指定所有事件处理程序而导致的 DOM 访问次数会延迟整个页面的交互就绪时间。
对事件处理程序过多问题的解决方案就是事件委托。
事件委托利用了事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件。
例如click 事件会一直冒泡到 document 层次。也就是说我们可以为整个页面指定一个 onclick 事件处理程序而不必给每个可单击的元素分别添加事件处理程序。
举一个具体的例子例如现在我的列表项有如下内容
ul idcolor-listlired/liliyellow/liliblue/liligreen/liliblack/liliwhite/li
/ul
如果我们想把事件监听器绑定到所有的 li 元素上面这样它们被单击的时候就弹出一些文字为此我们需要给每一个元素来绑定一个事件监听器。
虽然上面的例子中好像问题也不大但是想象一下如果这个列表有 100 个元素那我们就需要添加 100 个事件监听器这个工作量还是很恐怖的。
这个时候我们就可以利用事件代理来帮助我们解决这个问题。
将事件监听器绑定到父元素 ul 上这样即可对所有的 li 元素添加事件如下
var colorList document.getElementById(color-list);
colorList.addEventListener(click,function(){alert(Hello);
})
现在我们单击列表中的任何一个 li 都会弹出东西就好像这些 li 元素就是 click 事件的目标一样。
并且如果我们之后再为这个 ul 添加新的 li 元素的话新的 li 元素也会自动添加上相同的事件。
但是这个时候也存在一个问题虽然我们使用事件代理避免了为每一个 li 元素添加相同的事件但是如果用户没有点击 li而是点击的 ul同样也会触发事件。
这也很正常因为我们事件就是绑定在 ul 上面的。
此时我们可以对点击的节点进行一个小小的判断从而保证用户只在点击 li 的时候才触发事件如下
var colorList document.getElementById(color-list);
colorList.addEventListener(click, function (event) {if (event.target.nodeName LI) {alert(点击 li);}
})
真题解答
谈一谈事件委托以及冒泡原理 参考答案 事件委托又被称之为事件代理。在 JavaScript 中添加到页面上的事件处理程序数量将直接关系到页面整体的运行性能。导致这一问题的原因是多方面的。 首先每个函数都是对象都会占用内存。内存中的对象越多性能就越差。其次必须事先指定所有事件处理程序而导致的 DOM 访问次数会延迟整个页面的交互就绪时间。 对事件处理程序过多问题的解决方案就是事件委托。 事件委托利用了事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件。例如click 事件会一直冒泡到 document 层次。也就是说我们可以为整个页面指定一个 onclick 事件处理程序而不必给每个可单击的元素分别添加事件处理程序。 事件冒泡event bubbling是指事件开始时由最具体的元素文档中嵌套层次最深的那个节点接收然后逐级向上传播到较为不具体的节点文档。 总结
本篇文章是关于JavaScript的一道面试题后续还会持续更新HTML、CSS、JavaScript、Node.js、Vue.js、网络等前端相关面试题。如果文中出现有瑕疵的地方各位通过评论或者私信联系我我们一起进步有兴趣的伙伴可以关注订阅 前端面试题大全
