반응형
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
- TypeScript
- Vue
- mapGetters
- 자바스크립트
- MySQL
- 자료구조
- react
- ES6
- jsx
- JavaScript
- webpack
- sass
- Wecode
- event
- storybook
- 댓글달기
- express
- Vue.js
- vuex
- App.vue
- scss
- Vue transition
- HOC
- v-html
- 리액트
- CSS
- input
- nodejs
- State
- 쉬운설명
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 |
Comments