在 vanilla js 中进行事件委托的最佳方式（最快/正确）是什么？例如，如果我在 jQuery 中有这个：$('#main').on('click', '.focused', function(){ settingsPanel();})...

在 vanilla js 中进行事件委托的最佳方式（最快/最合适）是什么？

例如如果我在 jQuery 中有这个：

$('#main').on('click', '.focused', function(){
    settingsPanel();
});

我该如何将其转换为原生 js？或许可以用 .addEventListener()

我能想到的方法是：

document.getElementById('main').addEventListener('click', dothis);
function dothis(){
    // now in jQuery
    $(this).children().each(function(){
         if($(this).is('.focused') settingsPanel();
    }); 
 }

但这似乎效率低下，特别是在 #main 有很多孩子的情况下。

那么这是正确的做法吗？

document.getElementById('main').addEventListener('click', doThis);
function doThis(event){
    if($(event.target).is('.focused') || $(event.target).parents().is('.focused') settingsPanel();
}