Comments (9)
如果该 DOM 是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获 <<< 这句话有问题,测试以下代码,都是先执行捕获,再执行冒泡,与事件绑定顺序无关
window.addEventListener('click', () => {console.log('aa')})
window.addEventListener('click', () => {console.log('bbbbbbb')}, true)
from fe-interview.
老哥,经过实践,触发目标元素的点击事件,不论绑定捕获冒泡的顺序如何更改,回调的顺序都是先捕获再冒泡!!!火狐谷歌都是...
如果是我理解有误麻烦指正,如果是参考分析有误还请订正。
from fe-interview.
chrome,firefox都支持两种事件,捕获和冒泡,IE仅支持冒泡
from fe-interview.
<div id="btn">点击
<div id="btn2" style="margin: 100px;">
点击2
</div>
</div>
<script>
const btn = document.getElementById('btn')
const btn2 = document.getElementById('btn')
btn.addEventListener('click', () => {console.log('aa')})
btn.addEventListener('click', () => {console.log('bb')}, true)
btn2.addEventListener('click', () => {console.log('cc')})
btn2.addEventListener('click', () => {console.log('dd')}, true)
</script>
在chrome的结果都是
"bb"
"dd"
"aa"
"cc"
from fe-interview.
公众号好像不维护了。但是还是帮忙留言chrome的实际行为是「该场景下捕获总是在冒泡之前触发」
from fe-interview.
如果目标DOM元素有事件,则先事件,后捕获,然后在冒泡。
from fe-interview.
<div id="btn">点击 <div id="btn2" style="margin: 100px;"> 点击2 </div> </div> <script> const btn = document.getElementById('btn') const btn2 = document.getElementById('btn') btn.addEventListener('click', () => {console.log('aa')}) btn.addEventListener('click', () => {console.log('bb')}, true) btn2.addEventListener('click', () => {console.log('cc')}) btn2.addEventListener('click', () => {console.log('dd')}, true) </script>
在chrome的结果都是
"bb" "dd" "aa" "cc"
哈哈哈哈哈哈哈哈哈
from fe-interview.
const btn2 = document.getElementById('btn') 错误了
from fe-interview.
chrome,firefox都支持两种事件,捕获和冒泡,IE仅支持冒泡
我觉得这个得加上浏览器的兼容性问题,脱离兼容性说这个,有点缺乏完整性,很多回答是ie之外的浏览器,确实是不论绑定的事件的先后顺序,先捕获后冒泡,这个可以结合react中实现的合成事件来说或许更完整些,react的合成事件就是基于兼容性,为了磨平浏览器的差异,实现了一套类似冒泡阶段执行事件的机制,在合成事件中,只在冒泡阶段执行一次。
from fe-interview.
Related Issues (20)
- Day378:说一下什么是 Http 协议无状态?怎么解决 Http 协议无状态?
- Day379:如果让你来实现一个前端监控系统,应该考虑什么?如何去实现?
- Day380:实现一个系统,统计前端页面性能、页面 JS 报错、用户操作行为、PV/UV、用户设备等消息,并进行必要的监控报警。方案如何设计,用什么技术点,什么样的系统架构,难点会在哪里? HOT 3
- Day381:说一下 JavaScript 严格模式下有哪些不同?
- Day382:说一下 setTimeout 和 setInterval 的区别,包含内存方面的分析?
- Day383:说下 React 的 useEffect、useCallback、useMemo HOT 2
- Day384:JavaScript 中如何实现一个类?怎么实例化这个类? HOT 2
- Day386:写一个通用的事件侦听器函数 HOT 3
- 定时函数 HOT 1
- 小程序不维护了吗? HOT 10
- --
- 小程序里面的内容还有其他地方能学习吗
- 求小程序哇!!不然学习效率太低了 HOT 1
- 现在还能在哪里看题目答案吗?小程序关闭了😭😭 HOT 1
- #### 1)为什么会有Event Loop
- > > > @Genzhen 请教一下大佬,如果在render里面结构赋值也会影响性能吗?比如 const { page, size } = this.state这种的? HOT 1
- 考察原型链
- issue路径错误,提不了pr,可见下图
- vue中&nextTick的原理
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.