반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- scss
- HOC
- storybook
- 리액트
- nodejs
- mapGetters
- JavaScript
- sass
- App.vue
- v-html
- webpack
- State
- ES6
- Vue
- Vue transition
- Vue.js
- vuex
- react
- 자바스크립트
- express
- TypeScript
- CSS
- input
- 자료구조
- MySQL
- Wecode
- 댓글달기
- jsx
- 쉬운설명
- event
Archives
- Today
- Total
익명의 개발노트
Event handler with loop in javascript 본문
반응형
자바스크립트를 공부하면서 for문 안에 onclick 같은 이벤트 핸들러를 넣으면 그 수에 맞게 작동을 할 것같다.
하지만, 스코프 문제 때문에 그렇치 않음을 알 수있다.
흔히 볼 수 있는 예제를 보자.
출처 : https://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript
<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>
for(i=1; i<11; i++) {
document.getElementById("b"+i).onclick=function() {
alert(i);
}
}
그러면 저위에 링크된 b1~b10의 버튼을 클릭하면 for문을 돌아서 b1을 누르면 1이뜨고 10을 누르면 10이 나오게 될 꺼라고 생각을 한다.
하지만, for문안에 i를 보자. 앞에 변수 타입을 설정안해주면 전역변수로 들어간다고 배웠다.
그러면 저 for문의 i의 값은 무엇인가?
답은 11이다.
따라서, 저 위에 같이 버튼을 클릭하면 11이 뜬다.
이것을 해결할라면 3가지 방법이 있다. let 과 IIFE와 클로져.
이상 끝.
반응형
'프로그래밍 > javascript' 카테고리의 다른 글
ES6 특징 핵심요약 (0) | 2019.05.01 |
---|---|
Prototype, function Method and class (0) | 2019.04.11 |
Memoization (0) | 2019.03.14 |
call back 함수 (0) | 2019.02.28 |
Asynchronous Call (0) | 2019.02.28 |