凌源网站优化,中国做铁塔的公司网站,天津 做网站,杭州科技公司网站建设一、事件传播
1、概述
#xff08;1#xff09;当事件发生在DOM元素上时#xff0c;该事件并不完全发生在那个元素
#xff08;2#xff09;在冒泡阶段中#xff0c;事件冒泡或向上传播至父级、祖父级、祖父的父级#xff0c;直到 window 为止
#xff08;3#x…一、事件传播
1、概述
1当事件发生在DOM元素上时该事件并不完全发生在那个元素
2在冒泡阶段中事件冒泡或向上传播至父级、祖父级、祖父的父级直到 window 为止
3在捕获阶段中事件从 window 开始向下触发元素、事件或 event.target
2、事件传播的三个阶段
1捕获阶段——事件从 window 开始然后向下到每个元素直到到达目标元素
2目标阶段——事件已达到目标元素
3冒泡阶段——事件从目标元素冒泡然后上升到每个元素直到到达 window 二、事件冒泡
1、概述
1当事件发生在DOM元素上时该事件并不完全发生在那个元素上
2在冒泡阶段、事件冒泡或者事件发生在它的父级祖父级祖父的父级直到到达 window 为止
2、代码实例
1HTML结构
div classgrandparentdiv classparentdiv classchild1/div/div
/div
2对应的JS代码
function addEvent(el, event, callback, isCapture false) {if (!el || !event || !callback || typeof callback ! function) return;if (typeof el string) {el document.querySelector(el);};el.addEventListener(event, callback, isCapture);
}addEvent(document, DOMContentLoaded, () {const child document.querySelector(.child);const parent document.querySelector(.parent);const grandparent document.querySelector(.grandparent);addEvent(child, click, function (e) {console.log(child);});addEvent(parent, click, function (e) {console.log(parent);});addEvent(grandparent, click, function (e) {console.log(grandparent);});addEvent(document, click, function (e) {console.log(document);});addEvent(html, click, function (e) {console.log(html);})addEvent(window, click, function (e) {console.log(window);})});
addEventListener 方法具有第三个可选参数 useCapture其默认值为 false
事件将在冒泡阶段中发生如果为 true则事件将在捕获阶段中发生。如果单击 child 元素它将分别在控制台上记录 childparentgrandparenthtmldocument 和 window这就是事件冒泡 三、事件捕获
1、概述
1当事件发生在 DOM 元素上时该事件并不完全发生在那个元素上
2在捕获阶段事件从 window 开始一直到触发事件的元素
2、代码实例
1HTML 结构
div classgrandparentdiv classparentdiv classchild1/div/div
/div
2对应的JS代码
function addEvent(el, event, callback, isCapture false) {if (!el || !event || !callback || typeof callback ! function) return;if (typeof el string) {el document.querySelector(el);};el.addEventListener(event, callback, isCapture);
}addEvent(document, DOMContentLoaded, () {const child document.querySelector(.child);const parent document.querySelector(.parent);const grandparent document.querySelector(.grandparent);addEvent(child, click, function (e) {console.log(child);});addEvent(parent, click, function (e) {console.log(parent);});addEvent(grandparent, click, function (e) {console.log(grandparent);});addEvent(document, click, function (e) {console.log(document);});addEvent(html, click, function (e) {console.log(html);})addEvent(window, click, function (e) {console.log(window);})});
addEventListener 方法具有第三个可选参数 useCapture其默认值为 false
事件将在冒泡阶段中发生如果为 true则事件将在捕获阶段中发生。如果单击 child 元素它将分别在控制台上打印 windowdocumenthtmlgrandparent 和 parent这就是事件捕获。
