[javascript] jquery each + on

vanila js로 구현해보기

var switchItems = document.querySelectorAll('.switch_item');

// 1
Array.prototype.forEach.call(switchItems, function(el, i) {
	el.addEventListener('click', function(e){
		e.preventDefault();
		switchImg(el, i);
	});
})
function switchImg(el, i) {
	console.log(el, i)
}

// 2
for (var i = 0; i < switchItems.length; i++) {
	var switchItem = switchItems[i];
	switchItem.addEventListener('click', function(e){
		e.preventDefault();
		switchImage(switchItem, i);
	});
}
function switchImage(el, i) {
	console.log(el, i)
}

문제 : 2번에서 i가 전부 3으로 찍힘
상황

• es6 let/const 못씀

• 즉시실행함수는 JQuery가 아니었다!

해결

// 2
for (var i = 0; i < switchItems.length; i++) {
	(function (i) {
		var switchItem = switchItems[i];
		switchItem.addEventListener('click', function(e){
			e.preventDefault();
			switchImage(switchItem, i);
		});
	})(i);
}
function switchImage(el, i) {
	console.log(el, i)
}

1번과 2번 중...?