[예상 면접 질문] 이벤트 메소드와 위임

preventDefault

태그의 기본동작을 하지 않게 막아준다.

a 태그를 사용할 경우 새창으로 이동하는 것을 막고 form태그를 사용할 경우 창이 새로고침 되는 것을 막는다.

stopPropagation

이벤트 버블링이 되지않게 막는다.

stopImmediatePropagation

이벤트버블링을 막는다. + 다른 이벤트도 막는다.

여기서 말하는 다른이벤트를 예시를 들자면 여러개의 클릭이벤트를 동시에 연결 했을 경우 여러개의 클릭이벤트도 같이 막게 된다.

stopPropagation의 경우 다른 클릭이벤트를 막지는 않는다.

이벤트 캡처링과 버블링

버블링

이벤트 버블링은 자식의 이벤트가 부모에게도 전파되는 것을 말한다.

stopPropagation을 통해 전파를 막을 수 있다.

캡처링

버블링과 반대의 개념으로 부모의 이벤트가 자식에게 전파되는 것을 막는다.

이벤트 위임

이벤트를 위임하기 위해 addEvnetListner를 사용할 수있으며 해제하기 위해서 removeEnventListener를 사용할 수 있다.

다른 방법으로는 DOM요소에서 직접적으로 이벤트를 부여하는 방법도 있다.

addEventListner

• 첫번째 parameter: 이벤트 타입
• 두번째 parameter: 이벤트 리스너(콜백 함수)

removeEventListner

• 첫번째 parameter: 이벤트 타입
• 두번째 parameter: 삭제할 이벤트 리스너, addEventListner에서 사용했던 함수를 넣는다.

ex)
1. addEventListner
element.addEventListener('click', function() {
 // click시 동작할 함수 정의
});

2. event method
element.click(function(){
 // click시 동작할 함수 정의
});

3. removeEventListner
removeEventListner('click', function () { })