什么是事件流

概念:事件流就是当我们触发一个事件时,经过一系列操作的过程称为事件流,简单通俗来讲就是点击事件后,按顺序执行的就是事件流。那事件是什么呢?事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
 分类:

1.冒泡事件流:从明确事件源到不明确的事件源依次向上响应。
2.捕获事件流:从不确定事件源到确定事件源依次向下响应。
3.addEventListener(event,function,useCapture布尔值) //默认为false冒泡,true为捕获。
addEventListener
addEventListener:DOM2级时间新增的指定事件处理程序的操作。此方法接收的三个参数为:“要处理的时间名”“事件处理程序的函数”“一个布尔值”

当布尔值为true时,表示“捕获阶段”调用事件处理程序
当布尔值为false时,表示“冒泡阶段”调用事件处理程
如何实现先冒泡再捕获
在w3c标准中正常的执行顺序为:应先捕获再冒泡。
现要实现先冒泡再捕获,给一个元素绑定两个addEventListener。其中第三个参数为true(捕获)和false(冒泡),调整正常的代码顺序,将设置false的监听事件放在设置true的监听事件前面即可。此可使冒泡先执行。

在Web开发中,事件流是指当发生某个事件时,它会在DOM元素中按照特定的顺序传递,这个过程称为事件流事件流分为冒泡和捕获两种方式。 当一个事件发生在某个DOM元素上时,它会首先在祖先元素中按照从外到内的顺序进行捕获,直到达到目标元素。然后,它会在目标元素上触发,最后在祖先元素中按照从内到外的顺序进行冒泡。 事件流的过程可以用下面的代码来表示: ```html <!DOCTYPE html> <html> <head> <title>事件流</title> </head> <body> <div id="outer"> <div id="inner"> <p id="paragraph">点击我</p> </div> </div> <script> var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); var paragraph = document.getElementById('paragraph'); outer.addEventListener('click', function() { console.log('outer capture'); }, true); inner.addEventListener('click', function() { console.log('inner capture'); }, true); paragraph.addEventListener('click', function() { console.log('paragraph capture'); }, true); paragraph.addEventListener('click', function() { console.log('paragraph bubble'); }, false); inner.addEventListener('click', function() { console.log('inner bubble'); }, false); outer.addEventListener('click', function() { console.log('outer bubble'); }, false); </script> </body> </html> ``` 点击段落元素时,会按照以下顺序触发事件: 1. 外层div的捕获事件(outer capture) 2. 内层div的捕获事件(inner capture) 3. 段落元素的捕获事件(paragraph capture) 4. 段落元素的冒泡事件(paragraph bubble) 5. 内层div的冒泡事件(inner bubble) 6. 外层div的冒泡事件(outer bubble) 事件流的特点是:事件从最外层元素开始向目标元素传递,然后再从目标元素向外层元素传递。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值