0

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

我想调用一个函数 onClick 并仅检索我单击的 DOM 节点的位置，该节点是类的一部分。但是我不知道这将如何在纯 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)

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

4

2 回答 2

2

  • document.querySelectorAll返回一个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);
于 2015-07-06T19:49:35.870 回答
1

我认为这就是你想要的：

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

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

于 2015-07-06T19:53:13.693 回答