下面小编就为大家带来一篇深入理解 JS DOM 事件机制。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1、事件流
html 元素触发事件的顺序。
2、事件冒泡 IE 的事件流叫做事件冒泡 (event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。3、事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
DOM 事件流
"DOM2 级事件流" 规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。以简单的 HTML 页面为例,单击
在 DOM 事件流中,实际的目标(
元素)在捕获阶段不会接收到事件。这意味着在捕获阶段,事件从 document 到再到后就停止了。下一个阶段是 "处于目标" 阶段,于是事件在上发生,并在事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生,事件又传播回文档。阻止事件冒泡
实验
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript">
- function onBtn() {
- alert('button');
- //cancelBubble(); 阻止事件冒泡
- }
- //获取事件对象
- function getEvent() {
- //如果为ie或chrome
- if (window.event) {
- return window.event;
- }
- //针对firefox
- func = getEvent.caller; //获取函数调用者
- while (func != null) {
- var arg0 = func.arguments[0]; //获取调用者第一个参数
- //判断参数是否为空
- if (arg0) {
- //判断arg0是否为事件对象
- if ((arg0.constructor == Event || arg0.constructor == MouseEvent || arg0.constructor == KeyboardEvent) || (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
- return arg0;
- }
- }
- //获取func调用者
- func = func.caller;
- }
- return null;
- }
- //阻止事件冒泡
- function cancelBubble() {
- event = getEvent();
- // Firefox chrome
- if (event.preventDefault) {
- event.preventDefault();
- event.stopPropagation();
- } else {
- //ie
- event.cancelBubble = true;
- event.returnValue = false;
- }
- }
- </script>
- </head>
- <body onclick="alert('body')">
- <div onclick="alert('div');" style="background-color:green">
- <button onclick="onBtn()">
- dsd
- </button>
- </div>
- </body>
- </html>
上面的 html 代码执行的事件触发顺序。
默认情况: 依次会弹出'button' ---》 弹出'div' -----》弹出'body'
如果加上 cancelBubble() 代码:只会弹出'button'
以上这篇深入理解 JS DOM 事件机制就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0329/263755.html