javascript - 全局 onclick 处理程序与每个元素事件处理程序

Question

考虑这个例子：
您正在创建一个使用客户端渲染的网站。当用户单击链接时，您希望禁用浏览器的导航并自己呈现新页面。

也许你也有一些这样的html，并且你想在upvote_post(id)每次点击按钮时调用：

<post-element data-id=12345> 
   ... 
   <upvote-button></upvote-button>
</post-element>

处理这两种情况的常用方法是在您生成的每个 、 等元素上添加一个事件处理click程序。<a><upvote-button>

但是在文档本身上添加一个事件处理程序不是更好吗？

document.addEventListener('click', function(e) {
    for (let elem of e.path) {
        if (elem instanceof HTMLAnchorElement && elem.origin==window.location.origin) {
            e.preventDefault()
            render_page(elem.href)
            break
        } else if (elem.tagName=='UPVOTE-BUTTON') {
            let post = elem.closest('post-element')
            upvote_post(post.dataset.id)
            break
        }
    }
})

当然，绕过内置事件处理程序系统感觉不对，但我想不出这里有什么缺点。
如果需要，您仍然可以将事件处理程序添加到特定元素，但对于常见操作，这似乎是一个更好的解决方案。

标签： javascriptdom-events