Vanilla JS版jQuery文檔點擊鏈接？

Question

有沒有一個純JS版本？

$(document).on('click', 'a[href]', function(event) { 
    event.preventDefault(); 
    here.change(this); 
}); 

我期待的特定功能是爲通過JS（例如AJAX）創建的任何鏈接添加事件偵聽器。

Answer 1

我相信這完成你想要什麼：

// for all dom elements on click 
document.onclick = function(event) { 
    var el = event.target; // get what is being clicked on 
    if(el.hasAttribute('href') && el.tagName == 'a') { // check if it's a link 
     event.preventDefault(); 
     here.change(this); // what is this? 
    } 
} 

Answer 2

您可以將click事件document。檢查是否event.target.tagName是"A"，如果event.target有財產.href。目前尚不清楚是什麼預期here.change(this)結果預計從問題的文本做

function dynamicA() { 
 
    var a = document.createElement("a"); 
 
    a.href = ""; 
 
    a.textContent = "a"; 
 
    document.body.innerHTML += "<br>"; 
 
    document.body.appendChild(a); 
 
} 
 

 
document.addEventListener("click", function(event) { 
 
    event.preventDefault(); 
 
    if (event.target.tagName === "A" && event.target.href) { 
 
    // do stuff 
 
    dynamicA(); 
 
    } 
 
});

<a href>a</a>

Answer 3

現代瀏覽器都支持matches這使它成爲一個容易得多

document.addEventListener('click', function(event) { 
 
    if (event.target.matches('a[href], a[href] *')) { 
 
    event.preventDefault(); 
 
    console.log('works fine') 
 
    } 
 
}, false); 
 

 
document.body.innerHTML = '<a href="#"><span>Click Me!</span></a><br /><div>not me!</div>';

你能做出這樣一個簡單的功能

function addEvent(parent, evt, selector, handler) { 
    parent.addEventListener(evt, function(event) { 
    if (event.target.matches(selector + ', ' + selector + ' *')) { 
     handler.apply(event.target.closest(selector), arguments); 
    } 
    }, false);  
} 

注意closest()只在最新的瀏覽器支持更方便，有上MDN

此複製jQuery的行爲多了很多，而且更容易爲填充工具使用時，它還設置this值正確

function addEvent(parent, evt, selector, handler) { 
 
    parent.addEventListener(evt, function(event) { 
 
    if (event.target.matches(selector + ', ' + selector + ' *')) { 
 
     handler.apply(event.target.closest(selector), arguments); 
 
    } 
 
    }, false); 
 
} 
 

 
/* To be used as */ 
 

 
addEvent(document, 'click', 'a[href]', function(e) { 
 
    console.log(this) 
 
}); 
 

 
/* Add a dynamic element */ 
 

 
document.body.innerHTML = '<a href="#"><span>Click Me!</span></a><br /><div>not me!</div>';