理解Pure JS中的事件附件代码

understanding event attachment code in Pure JS

本文关键字：代码 事件 Pure JS 理解      更新时间：2023-09-26

嘿，伙计们，我是JS新手，基本上对Jquery有一点了解，所以我正在浏览这篇(纯Javascript中的Jquery)文章，他们有以下示例:

 $('a').on('click', fn);

在本例中，我们将点击事件监听器附加到页面上的所有锚标记。

上面的Jquery代码重写如下:

[].forEach.call( document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
     // anchor was clicked
  }, false);
});

现在我明白call()如何在JS中工作，以及forEach如何在JS中工作，但我不明白[]在forEach前面做什么，很难理解上述代码中的执行顺序，也很难理解谁在function(el)内部传递el ?

有人能解释一下吗?

谢谢。

Alex-z .

[]是Array.prototype的快捷方式，所以它实际上是

Array.prototype.forEach.call( document.querySelectorAll('a'), callback );

它接受本地Array.prototype.forEach，并使用querySelectorAll的结果nodeList作为它的第一个参数，this的值，以及作为第二个参数的回调函数来调用它。

这样调用它可以让我们传入非数组，比如"类数组"的对象，因为它们有一个长度属性，比如arguments或nodeList，否则不能通过直接在对象上使用Array.forEach来迭代对象。

相关文章：