Click me
``` ``` js document.addEventListener('click', (e) => { console.log('Document click') }, { capture: true }) container.addEventListener('click', (e) => { console.log('Container click') // e.stopPropagation() }, { capture: true }) item.addEventListener('click', () => { console.log('Item click') }) btn.addEventListener('click', () => { console.log('Btn click') }) btn.addEventListener('click', () => { console.log('Btn click When Capture') }, { capture: true }) ```">
极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 关于事件捕获和冒泡,以下代码输出多少

更多描述

代码见: 事件捕获和冒泡 - Codepen (opens new window)

以下代码输出多少:

<div class="container" id="container">
  <div class="item" id="item">
    <div class="btn" id="btn">
      Click me
    </div>
  </div>
</div>
document.addEventListener('click', (e) => {
  console.log('Document click')
}, {
  capture: true
})

container.addEventListener('click', (e) => {
  console.log('Container click')
  // e.stopPropagation()
}, {
  capture: true
})

item.addEventListener('click', () => {
  console.log('Item click')
})

btn.addEventListener('click', () => {
  console.log('Btn click')
})

btn.addEventListener('click', () => {
  console.log('Btn click When Capture')
}, {
  capture: true
})

Issue

欢迎在 Issue 中交流与讨论: Issue 559 (opens new window)

Document click
Container click
Btn click When Capture
Btn click
Item click

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 6/17/2021, 2:42:18 AM