JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<div id="div0">Click me! DIV 0</div>
<div id="div1">Click me! DIV 1</div>
<div id="div2">Click me! DIV 2</div>

<div id="divWith0">Click me. DIV 0</div>
<div id="divWith1">Click me. DIV 1</div>
<div id="divWith2">Click me. DIV 2</div>

<div id="divScope0">Click me! DIV 0</div>
<div id="divScope1">Click me! DIV 1</div>
<div id="divScope2">Click me! DIV 2</div>

<div id="divClosure0">Click me. DIV 0</div><div id="divClosure1">Click me. DIV 1</div><div id="divClosure2">Click me. DIV 2</div>

JavaScript

var i, len = 3;

// 기대하지 않은 결과를 보여주는 예제
for (i = 0; i < len; i++) {
    document.getElementById('div' + i).addEventListener('click', function() {
        window.alert('You clicked div #' + i);
    }, false);
}

// 문제는 해결할 수 있으나 추천하지 않는 방법
for (i = 0; i < len; i++) {
    with({num:i}) {
        document.getElementById('divWith' + num).addEventListener('click', function() {
            window.alert('You clicked div #' + num);
        }, false);
    }
}

// 다른 방식으로의 문제 해결방법
function setDivClick(index) {
    document.getElementById('divScope' + index).addEventListener('click', function() {
        window.alert('You clicked div #' + index);
    }, false);
}
for (i = 0; i < len; i++) {
    setDivClick(i);
}

// closure와 익명함수의 조합을 이용한 방법
for (i = 0; i < len; i++) {
    document.getElementById('divClosure' + i).addEventListener('click', (function(index) {
        return function() {
            window.alert('You clicked div #' + index);
        };
    }(i)), false);
}