焦溪翠冠梨做的网站,网站图标ico 设置,房产网站建设接单,长沙网站建设团队说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 事件传播⭐ addEventListener()方法。 ⭐ 事件传播
先来思考一个问题
当页面的盒子有嵌套时如果盒子都设置了同样的事件监听那么事件监听触发的顺序是什么样的呢比如下面图中三个盒子都设置了onclick事件监听当鼠标点击最内侧的盒子时会触发三个盒子的onclick事件那这三个事件触发的顺序是怎样的 我们编写代码来验证一下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box1 {width: 142px;height: 142px;border: 1px solid #000;padding: 20px;}#box2 {width: 102px;height: 102px;border: 1px solid #000;padding: 20px;}#box3 {width: 100px;height: 100px;border: 1px solid #000;}/style
/head
bodydiv idbox1div idbox2div idbox3/div/div/divscriptvar oBox1 document.getElementById(box1);var oBox2 document.getElementById(box2);var oBox3 document.getElementById(box3);oBox1.onclick function () {console.log(鼠标单击box1);};oBox2.onclick function () {console.log(鼠标单击box2);};oBox3.onclick function () {console.log(鼠标单击box3);};/script
/body
/html这种从内到外触发事件的过程就是事件传播的过程。
但事实上真实的事件传播并不仅仅是由内到外的而是先从外到内然后再从内到外那为什么结果只有从内到外的呢这是因为onxxx事件监听只能监听后面的一段过程即从内到外的过程。 **事件的传播**DOM规定事件传播的方向是先从外到内再从内到外 从外到内的过程为捕获阶段capturing phase从内到外的过程为冒泡阶段Bubbing phase 那么问题来了如何才能监听到捕获阶段呢这就用到第二种事件监听方法——addEventListener()方法。
在DOM更新过程中事件监听分成两个级别DOM0级事件监听和DOM2级事件监听。一开始只有DOM0级事件监听只能监听到冒泡阶段在DOM2中新增加了addEventListener()方法可以监听到捕获和冒泡两个阶段。之所以没有DOM1级是因为DOM1中没有对事件监听的方法进行更新修改。
⭐ addEventListener()方法。
addEventListener()方法的示例代码
oBox.addEventListener(click, function(){ //click表示鼠标单击//事件处理函数代码
}, true);//true表示监听捕获阶段false表示监听冒泡阶段上面的例子中用addEventListener()方法监听整个事件传播的过程代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box1 {width: 142px;height: 142px;border: 1px solid #000;padding: 20px;}#box2 {width: 102px;height: 102px;border: 1px solid #000;padding: 20px;}#box3 {width: 100px;height: 100px;border: 1px solid #000;}/style
/head
bodydiv idbox1div idbox2div idbox3/div/div/divscriptvar oBox1 document.getElementById(box1);var oBox2 document.getElementById(box2);var oBox3 document.getElementById(box3);oBox1.addEventListener(click, function () {console.log(我是box1的捕获阶段);}, true);oBox2.addEventListener(click, function () {console.log(我是box2的捕获阶段);}, true);oBox3.addEventListener(click, function () {console.log(我是box3的捕获阶段);}, true);oBox1.addEventListener(click, function () {console.log(我是box1的冒泡阶段);}, false);oBox2.addEventListener(click, function () {console.log(我是box2的冒泡阶段);}, false);oBox3.addEventListener(click, function () {console.log(我是box3的冒泡阶段);}, false);/script
/body
/html上述代码中需要注意的是触发事件监听的顺序跟代码书写的顺序没有关系的新手可能会误以为两者有关系我们把捕获和冒泡的代码顺序调一下也不会影响事件传播顺序 还需注意的是如果给元素设置相同的两个或多个同名事件时DOM0级的事件监听后面写的会覆盖先写的而DOM2级的会按顺序执行。示例代码
bodydiv idbox1div idbox2div idbox3/div/div/divscriptvar oBox1 document.getElementById(box1);var oBox2 document.getElementById(box2);var oBox3 document.getElementById(box3);oBox2.onclick function () { //这个事件监听会被后面的覆盖console.log(A);};oBox2.onclick function () {console.log(B);};oBox2.addEventListener(click, function () { //不会被覆盖console.log(C);},true)oBox2.addEventListener(click, function () { //不会被覆盖console.log(D);},true)/script
/body
