等效于 Javascript 中的 jQuery 代码答案

【问题标题】：Equivalent of jQuery code in Javascript等效于 Javascript 中的 jQuery 代码
【发布时间】：2015-10-25 14:07:25
【问题描述】：

这是我的 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'标签，则提示('点击成功')"

而不是循环遍历所有 标签？使用标签名称的任何替代方式？

【问题讨论】：

你想不使用jquery吗？
如果纯 JS 对您来说太笨重，为什么要在没有 jQuery 的情况下这样做？ =)
"Javascript 代码太庞大" — 它比 jQuery 代码短（这是您提供的代码，加上 jQuery 库中执行非 jQuery 代码循环的部分，加上你没有使用的 jQuery 库的部分）。
我的意思是人们编写像 jQuery 这样的辅助库是有原因的。如果您不想长期做事，那么最好的处理方法通常是使用其他人编写的代码。

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

这不起作用。或者更确切地说，它仅在段落中只有文本时才有效。只要您添加任何元素，即使是无辜的，单击该子元素也不会触发警报。
附带说明，nodeName 通常是更好的选择 stackoverflow.com/questions/4878484/… 是的，您应该检查任何上升节点或节点本身是否是 P 元素
@NiettheDarkAbsol 说“这不起作用”是错误的，但这是一个值得注意的警告。一旦你添加了对后代的检查，你就会回到 OP 想要避免的大部分内容。

【解决方案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 存在的一半原因，您必须在自己的重新发明中考虑所有这些；）

【讨论】：

如果我们真的想学究气，这仍然缺少一些对不支持addEventListener()方法的浏览器的支持，所以不，这不等同于jQuery方法:)
@A.Wolff 那么 jQuery 2.0 呢？ :p
好吧......但是你可以在答案本身中提到它
@A.Wolff 好了，添加了注释^^

【解决方案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

【讨论】：

这在功能上与丹尼斯的答案相同，并且遇到了同样的问题。 Can't touch this.

【解决方案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/

【讨论】：