什麼是推薦的本地JavaScript等同於jQuery委託事件？

Question

我想知道什麼是最好的天然JS實踐一個jQuery委派事件處理程序是這樣的：

$('body').on('click','.my-class', event => { 
    // perform action 
}); 

事件代表團這樣可以讓你添加點擊事件動態添加HTMLElements因爲你是聽着都點擊body或document。

現在我正在做這樣的事情，感覺有點混亂，有時如果用戶點擊svg就會中斷。此外，當您想要在相當長的HTMLElement.classList（例如'.my-main-class.my-temp-class'）中定位多個班級時，這變得很困難。

document.body.addEventListener('click', event => { 
    if (event.target.classList.contains('my-class')) { 
    // perform action 
    } 
}); 

即使是我可以導入的NPM dom幫助程序庫，我們將不勝感激。

Answer 1

這是一個演示JavaScript函數來檢查是否元素有多個類使用class屬性而不是classList

document.body.addEventListener('click', function(e){ 
 

 
    console.log('Does element have classes my-class and svg - ' + e.target.hasClasses('my-class svg')); 
 
    
 
    console.log('Does element have class my-class - ' + e.target.hasClasses('my-class')); 
 
    
 
}); 
 
     
 
Element.prototype.hasClasses = function(classes) { 
 
    // get element classses string 
 
    var elementClass = this.getAttribute('class'); 
 
    
 
    // return false if class is not set at all 
 
    if(elementClass == null) return false; 
 
    
 
    // check if this class is found in elementClass string 
 
    return classes.split(' ').reduce(function(acc, current){ 
 
     return Boolean(acc && ~elementClass.indexOf(current)); 
 
    }, true); 
 
    
 
};

<button class="my-class">I have my-class</button> 
 
<br/> 
 
<p class="not-valid some-other">I have not-valid and some-other classes</p> 
 
<br/> 
 
<svg width="100" height="100" style="background-color:blue;" class="my-class svg"> 
 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" class="circle class"/> 
 
</svg>

注

照顧與SVG。嘗試單擊藍色背景並在圓圈內部查看區別

Answer 2

一種方式做到這一點：

編輯：更新後處理動態地添加元素

// Handle clicks 
 
function clickHandler(event) 
 
{ 
 
    console.log(event.target.id); 
 
} 
 
// Handle dynamic element changes 
 
function domchangeHandler(mutations) 
 
{ 
 
    console.log("changed"); 
 
    var eList=document.getElementsByClassName('my-class'); 
 
    for (var i = 0; i < eList.length; i++) { 
 
    eList[i].addEventListener('click',clickHandler); 
 
    } 
 
} 
 

 
// Create new MutationObserver 
 
var observer = new MutationObserver(domchangeHandler); 
 
var config = { attributes: true, childList: true }; 
 
observer.observe(document.body, config); 
 

 

 
// Add dynamic elements 
 
for (var i=1;i<4;i++){ 
 
    var button=document.createElement('button'); 
 
    button.id="div"+i; 
 
    button.className="my-class class-"+i; 
 
    button.innerText="Click me, I'm Button "+i; 
 
    document.body.appendChild(button); 
 
} 
 

 
var div= document.createElement('div'); 
 
div.innerHTML='<svg id="svg1" width="100" height="100" style="background-color:blue;" class="my-class svg"><g><circle id="circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" class="circle class"/></g></svg>' 
 
document.body.appendChild(div);