Javascript 이벤트와 이벤트 중단

이벤트 : 웹 브라우저에서 웹 문서에 특별한 일이 있을 때 발생하는 신호

 

이벤트 핸들러 : DOM 객체에 할당되어 해당 객체의 이벤트 반응에 호출되어 처리되는 프로퍼티

이벤트 핸들러 역할 : 이벤트 발생 감지 -> 이벤트 감지 -> 지정된 자바스크립트 코드 또는 함수 호출

 

 

이벤트 종류

1. 마우스 관련

onclick // 마우스 클릭 감지

onmousedown // 마우스 단추 눌렸는지 감지

onmouseup // 눌려젔던 마우스 단추가 올려졌는지 감지

onmouseover // 커서가 특정 객체 위에 있는지 감지

onmouseout // 커서가 특정 객체에서 벗어났는지 감지

onmousemove // 마우스 커서 이동 감지

 

2. 로딩 관련

onload // 이미지 또는 화면 로딩이 완료됬는지 감지

onunload // 현재 화면에서 벗어날때를 감지(페이지 이동)

 

3. 서식 관련

onsubmit / onreset // 서식이 전송 / 재설정 될 때를 감지

onfocus / onblur // 특정 서식 요소에 마우스 커서나 텍스트 커서가 접근or벗어남을 감지

 

4. 키보드 관련

onkeydown // 키보드 눌렸는지 감지

onkeypress // 키보드가 눌려지고 있는지 감지

onkeyup // 눌려진 키보드가 올려졌는지 감지

 

Javascript 에서 이벤트 전파를 중단하는 방법

자바스크립트 이벤트 리스너에서 preventDefault() 와 stopPropagation() 그리고 return false 는 자바스크립트

프로그래밍을 할 때 이벤트 중단을 위해 자주 사용되는 코드들이다.

 

event.preventDefault()

- 현재 이벤트의 기본 동작을 중단한다.

- 클릭 이벤트 외에 다른 브라우저 행동을 막기 위해 사용

 

event.stopPropagation()

- 현재 이벤트가 상위로 전파되지 않도록 중단한다.

 

event.stopImmediatePropagation()

- 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다.

 

참고

[JavaScript] JavaScript에서 이벤트 전파를 중단하는 네가지 방법

 

이벤트 핸들러 지정 방법

- 이벤트 속성에 직접 할당 ex) btn.onclick = function() {}

- addEventListener 메소드 사용 ex) btn.addEventListener("click", clickHandler)

 

Onclick 직접 할당과 AddEventListner 메소드의 차이

브라우저의 호환성

브라우저의 호환성 면에서, onclick 직접 할당은 모든 브라우저와 버전에서 호환되는데 비해

addEventListener 메소드는 IE 6, 7, 8 에서는 호환되지 않는다는 점이 있다.

여기서 addEventListener 메소드의 호환 여부를 확인할 수 있다.

자신의 웹이 정말 옛날 버전의 IE 에서도 동작하기를 원한다면, 혹은 호환성에 신경쓰고 싶지 않다면 onclick 직접 할당을 사용하는 것이 좋다.

 

참고

Onclick vs AddEventListener 어떤 것을 사용해야 할까?