浏览器单击事件绑定空方法为什么能执行

背景

标题就是我之前产生的疑惑。

排查

F12打开开发者工具，选择页面中的那个单击元素。

找到事件侦听器 -> click
一般最下面这个就是我们的元素。

之所以感到困惑，是因为这个按钮元素绑定的方法是个空函数，但是确实有对应的调用。

function Rr() {}

可以看到，上面有三个div，其实都是同一个元素，也就是父级，我也不知道为啥他要把事件处理全放在这个父级元素上面。

三个事件监听，分别对应三个按钮。

• 事件冒泡到父元素上才真正进行处理
• 父元素绑定了多个处理函数，因此每个函数中其实应该有某种判断。