Вызов функции только для одного div определенного класса с использованием чистого JS

Question

как часть моего процесса обучения в качестве разработчика интерфейса, я решил создать продукт без jQuery и вместо этого использовать ванильный 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) 

Заранее спасибо и любые другие возможные пути решения этой проблемы очень ценятся.

Answer 1

• 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); 

Answer 2

Я думаю, что это то, что вы хотите:

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

Это приведет к this объема быть установлен на элемент, щелкнули.