addEventHandler vào mọi phần tử trong một lớp

Question

Tôi đang cố thêm một trình xử lý sự kiện vào tất cả các phần tử với một lớp phần, tuy nhiên nó chỉ áp dụng nó cho đối tượng cuối cùng trong danh sách nút.

var section = document.querySelectorAll('.section'); 
for(var i=0;i<section.length;i++){ 
var elem = section[i]; 
elem.addEventListener('click', function() {move (elem)}, false); 
} 

Có cách nào để tôi có thể thêm trình xử lý sự kiện cho từng người không?

Answer 1

Vấn đề là không có phạm vi chặn trong JavaScript. Vì vậy, elem được ghi đè mỗi lần lặp, thay vì được khai báo dưới dạng biến mới mỗi lần. Cách duy nhất để khai báo các biến mới trong mỗi lần lặp là thông qua một chức năng:

for(var i = 0; i < section.length; i++){ 
    (function(elem) { 
    elem.addEventListener('click', function() { move(elem); }, false); 
    })(elem); 
} 

Nhưng addEventListener bộ this đến yếu tố, do đó, trong trường hợp của bạn, bạn có thể làm gọn gàng:

for(var i = 0; i < section.length; i++){ 
    elem.addEventListener('click', function() { move(this); }, false); 
} 

Answer 2

đó là vì bạn đang tham chiếu elem và i bên trong hàm. Tôi có thể đề xuất thử

var section = document.querySelectorAll('.section'); 
for(var i=0;i<section.length;i++){ 
    var handler = (function(ind){ 
     return function() { 
      move (section[ind]); 
     } 
    })(i) 

    elem.addEventListener('click', handler, false); 
}