<script>
/*
예제 05: 버튼을 클릭하면 물고기를 왼쪽에서 오른쪽으로 움직여 주세요.
*/
window.onload = function(){
var fish = document.getElementById('fish');
var btnStart = document.getElementById('btnStart');
var left = 50;
var timerID = 0;
btnStart.addEventListener('click',function() {
timerID = setInterval(function() {
left++;
fish.style.left = left + 'px';
if(left>=430){
clearInterval(timerID);
timerID = 0;
}
},20)
}, false) //<<<<=== 이 부분입니다.
}
</script>
위 소스입니다. 소스의 내용을 전부 다 이해를 하는데요..
위 소스에서 아래쪽에 주석을 단 부분입니다.
즉, 왜 false가 들어가는지 궁금합니다.
혹,,그래서, false를 지워봤어도 별 차이가 없는데,,왜 저자는 false를 넣었는지,,
뭘 말하고 싶은건지 궁금합니다.
그리고,
버튼을 단 한번 누르면 물고기가 left값이 >=430 이면 멈추도록 돼어 있는데..
연달아 한번 더 누르면 멈추지 않고, 브라우저 창 오른쪽으로 사라집니다.
이건 false가 있어도,,없어도 마찬가지입니다.
분명히, 아래와 같은 조건문이 있음에도 불구하고요. -..=;;;
if(left>=430){
clearInterval(timerID);
timerID = 0;
}
먼저 첫번째 질문에 대해 답변 드리겠습니다.
addEventListener() 함수의 세번째 인자에는 이벤트의 발생 순서를 정의하는 값을 넘길 수 있습니다.
올리신 예제에서는 현재 false값으로 지정되어있네요.
이 값은 DIV 태그가 중첩되어 있는 경우에 어떤 DIV부터 이벤트를 처리할 지를 지정합니다.
따라서 올리신 예제에서는 중첩된 DIV가 없기 때문에 false이든 true이든 동작하는데 아무 영향을 미치지 않습니다.
DIV가 중첩되는 경우를 예를 들어 설명드리자면,
만약 아래 그림과 같이 DIV가 정의되어있다고 했을 때,
child 영역을 클릭한 경우, addEventListener() 함수의 인자로 false를 넘기면 #child 부터 #parent 순서로 이벤트를 처리(Event Bubbling)하고, true를 넘기면 #parent부터 #child 순서로 이벤트를 처리(Event Capturing)합니다.
아래 예제를 보면서 다시 설명을 드리겠습니다.
위 예를 실행한 다음 child에 해당하는 파란 영역을 클릭한다고 했을 때,
child 영역은 곧 parent 영역 안에 있기도 하기 때문에 child의 이벤트를 먼저 실행할 지, parent의 이벤트를 먼저 실행할 지에 대한 고민이 생깁니다.
위 예제에서는 둘 다 false로 지정했기 때문에 child가 먼저 실행되고 parent가 나중에 실행됩니다.
만약 false로 되어있는 부분을 둘 다 true로 변경하면 parent가 먼저 실행되고 child가 나중에 실행되는 것입니다.
다음으로 두 번째 질문에 대해 답변드리겠습니다.
올려주신 코드에서는 timerID를 전역적으로 선언했기 때문에 버튼을 아무리 여러번 눌러도 timerID 변수는 하나밖에 존재하지 않게 됩니다.
다시 말해, 버튼을 누를 때마다 timerID가 각각 발생해서 clearInterval(timerID)를 통해 없어져야 하는데, timerID가 각각 발생하는 것이 아니라 하나의 변수에만 들어가게 되는 것입니다.
원하시는대로 동작하게 하려면 아래와 같이 addEventListener() 함수 안에 있는 timerID 앞에 var를 붙여서 timerID를 지역 변수로 만드시면 됩니다.
var timerID = setInterval(function() { ...