事件冒泡

Question

        <div id="div3">
            <a href="#">a1</a><br>

const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    event.stopPropagation();
    alert(this.innerHTML)
})

老师您好，上述代码是否可以理解成onclick监听器其实是绑定在div3标签，如果点击a标签，这个点击事件要向上冒泡到div3才被监听到并执行回调呢？
a标签如果监听onclick事件，是先执行onclick再执行href跳转，但是此时在a标签并没有监听onclick事件，为什么在此不会跳转到‘#’呢，这个时候不是还没冒泡到div3标签被监听到并执行吗？

Answer 1

双越 2022-04-12 08:30:57

是冒泡到 div3 才被触发执行的。

• 提问者 EricTai #1

  既然要冒泡到div3才被触发执行，在a标签阶段时还没冒泡上去，此时a标签没有绑定事件，那为什么在a标签时不会执行href跳转到#呢？event.stopPropagation（）和event.prevent Default()不是要冒泡到div3执行回调的时候才会被执行吗，此时还没冒泡到div3，理应执行href跳转？麻烦老师帮忙看一下我哪里理解出了问题呢

• 双越 回复 提问者 EricTai #2

  event.preventDefault() 阻止是当前事件，并不是只阻止 div3 。
  如果按你理解，那阻止 a 跳转，就必须要绑定在 a 上了 —— 实际不是这样的。