使用纯 JS 仅调用某个 class 中的一个 div 函数

Question

作为我作为前端开发人员的学习过程的一部分，我决定生产一个没有 jQuery 的产品，而是使用 vanilla JavaScript 来完成我所有的交互。

我想调用函数 onClick 并仅检索我单击的 DOM 节点的位置，它是 class 的一部分。但是我不知道这将如何在纯 JavaScript 中完成。基本上我想复制 $(this) 在 jQuery.

中的作用

到目前为止，这是我的代码：

function expand(name) {
    var elem = document.querySelectorAll(name)

for (var i = 0; i < elem.length; i++) {
    var rect = elem[i].getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    }
}

document.querySelectorAll(".box").onclick = expand(this)

在此先致谢，非常感谢任何其他可能的问题解决方案。

Answer 1

document.querySelectorAll returns一个NodeList。这是类数组，需要迭代
您可以在处理程序中使用 this 来引用处理程序附加到的节点
侦听事件的普通方式是 EventTarget.addEventListener，它一次只为一种事件类型附加一个处理程序，因此如果您希望能够使用多个，您将需要在这里再次循环（你没有在你的例子中这样做但是 jQuery 让你这样做）

function expand() {
    var rect = this.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
}

function nodeListOn(list, type, handler, useCapture) {
    var i, t;
    type = type.split(/s+/);
    for (i = 0; i < list.length; ++i) {
        for (t = 0; t < type.length; ++t) {
            list[i].addEventListener(type[t], handler, useCapture);
        }    
    }
}

var nodes = document.querySelectorAll('.box');
nodeListOn(nodes, 'click', expand);

Answer 2

我想这就是你想要的：

var elements = document.querySelectorAll(".box");
Array.prototype.forEach.call(elements, function(element) {
    element.onclick = expand.bind(element);
});

这将导致 this 范围被设置为被点击的元素。

使用纯 JS 仅调用某个 class 中的一个 div 函数

Calling function to only one div of a certain class using pure JS

javascript

foreach

dom

this

dom-node