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

背景

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

排查

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

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

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

function Rr() {}

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

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

• 事件冒泡到父元素上才真正进行处理
• 父元素绑定了多个处理函数，因此每个函数中其实应该有某种判断。
  下面是粗略的示意代码，一般浏览器里面压缩过的代码很难看得懂。

// 父元素上的处理器
toolbar.addEventListener('click', function(e) {
    if (/下载/.test(e.target.textContent)) {
        // 只处理下载按钮的点击
        handleDownload();
        return;
    }
    // 不是下载按钮的点击，直接忽略
});

toolbar.addEventListener('click', function(e) {
    if (/赞/.test(e.target.textContent)) {
        // 只处理点赞按钮的点击
        handleLike();
        return;
    }
    // 不是点赞按钮的点击，直接忽略
});