이벤트 리스너와 콜백

이벤트 리스너

---

이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기중인 겁니다. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행됩니다.

    window.onload = function() {
    	console.log('실행됩니다.');
    };

• 위 코드를 보면 window 가 실행될 때에 함수 부분이 실행되는 겁니다. 실행되는 것을 누가 알려주냐면, 브라우저가 알려줍니다.

이벤트를 붙이는 다른 방법으로는 addEventListener가 있습니다. 이 방식은 여러 이벤트를 등록할 수 있고, 특정 이벤트 제거(removeEventListener)할 수도 있습니다.

    function onClick() {
    	console.log('클릭');
    }
    function onClick2() {
    	console.log('클릭2');
    }
    //이벤트 연결
    document.getElementById('clickMe').addEventListener('click',onClick)
    //또 하나의 이벤트 연결
    document.getElementById('clickMe').addEventListener('click',onClick2)
    //연결할 이벤트 중 하나 제거
    document.getElementById('clickMe').removeEventListener('click',onClick)

콜백

---

위 두 코드에서 function 부분을 부르는 게 콜백 이라고 합니다. call + back 다시 전화를 주다. 이벤트가 실행됐을 때, 사용자에게 다시 알려주는 겁니다.

    let example = function(number,cb) {
    	setTimeout(function() {
    		var sum = 0;
    		for(var i = number; i > 0; i--) {
    			sum += i;
    		}
    		cb(sum);
    	},0); 
    }
    example(10,function(result){
    	console.log(result);
    });

example 함수의 매개변수 cb가 바로 '콜백' 함수를 받는 부분입니다. example을 호출할 때 두 번째 인자로 function을 넣은 게 보이시나요? 그 함수가 콜백 함수로 등록되어 계산이 끝난 후 실행됩니다.

이벤트 버블링

---

이벤트 버블링이라고 들어보셨나요? DOM에 연결한 이벤트는 버블링이 일어납니다.

버블링이란 자식의 이벤트가 부모에도 전달되는 것을 말합니다.

    <div id="first">
      <div id="second">
        <div id="third">
        </div>
      </div>
    </div>

위와 같은 구조가 있을 때 div#third를 클릭한 경우, 부모와 조상 태그인 second,first 순으로 같은 클릭 이벤트가 발생합니다.