javascript - 等效于 Javascript 中的 jQuery 代码

Question

这是我的 jQuery 代码

$('p').click(function(){
    alert("click successful!");
});

这是我能想到的 JS 代码

window.onload = function() {
    var para = document.getElementsByTagName('p');
    for(var i = 0; i < para.length; i++) {
        para[i].addEventListener('click',function(){
            alert("click successful!");
        });
    }
}

Javascript 代码太庞大了，有没有办法让我可以通过名称选择标签并将代码编写为 -

"If any 'p' tag is clicked, alert('click successful')"

而不是遍历所有 <p></p>标签？ 使用标签名称的任何替代方法？

Answer 1

您可以使用事件委托(delegate) - 将点击处理程序添加到更高级别的元素并检查 event.target

document.body.addEventListener("click", function(e) {
    if (e.target.tagName.toLowerCase() == "p") alert("click succeeded");
});

演示:http://jsfiddle.net/jdkr3sch/