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代码太笨重，有没有办法可以按名称选择标记并将代码编写为 -

“如果点击任何'p'标记，则提醒（'点击成功'）”

而不是遍历所有<p></p>代码？使用标记名称的其他方式？

Answer 1

您可以使用事件委派 - 向更高级别的元素添加点击处理程序并检查event.target

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

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

Answer 2

jQuery是“少代码”，因为你正在调用一个预先编写的函数。不想使用jQuery？然后编写自己的函数。

function addEventToElements(tagname,handler) {
    var elems = document.getElementsByTagName(tagname);
    for(var i = 0, l = elems.length; i<l; i++) {
        elems[i].addEventListener('click',handler);
    }
}

现在在您的实际代码中，您可以写：

addEventToElements('p',function() {alert("click succeeded");});

恭喜，您重新发明了jQuery。

...或者不是，因为jQuery之所以如此受欢迎的原因是它更多地批次。标准化浏览器支持（对于那些使用attachEvent或旧onEventName处理程序）的事情是jQuery存在的原因之一，并且您必须在自己的重新发明中考虑所有这些; ）

Answer 3

这是一个更短的方式。

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(evt) {
        if (evt.target.matches('p, p *')) alert('Paragraph clicked!');
    }, false);
}, false);

注意：

1）这具有事件委派的优势，这是我建议调查的内容。简而言之，意味着您将事件绑定一次，而不是N次，然后询问哪个元素在触发时触发它，即在回调中，而不是在您当前声明事件时。

2）对于等待使用元素，使用DOMContentLoaded事件而不是window.onload - 前者（松散地）类似于jQuery的DOM就绪处理程序。

3）matches()是一种相对现代的方法，在古代浏览器中不起作用，或者可能需要以供应商为前缀的版本 - http://caniuse.com/#feat=matchesselector

Answer 4

用于选择：

document.querySelectorAll('p')

（也适用于多个元素p）。

AFAIK这是与$('p')

最接近的事情

addEventListener('click',function(){alert("click successful!")}

将单击处理程序添加到单个元素。

模拟一个数组，你可以在dom元素集合上使用[].slice.call（这样你就可以使用.forEach()方法）。

所有在一起：

[].slice.call(document.querySelectorAll('p')).
forEach(function(x){x.addEventListener('click',
    function(){alert("click successful!")
})})

https://jsfiddle.net/maio/m861hbmh/

相当于Javascript中的jQuery代码

4 个答案: