Javascript 이벤트

이벤트란?

웹페이지에서 사용자가 클릭을 하거나 키보드 입력과 같은 상호작용을 하게 되는데, 클릭이나 키 입력과 같이 발생하는 것을 이벤트라고 한다. 창 사이즈를 조절하거나 스크롤을 내리거나 올릴 때에도 이벤트는 발생하고, 이벤트가 발생했을 때 실행되는 메소드를 이벤트 핸들러라고 한다.

IE에서 이벤트 추가하기

표준 브라우저에서 이벤트 추가하기

이벤트 추가하는 함수

IE와 표준브라우저에서 사용할 수 있는 함수를 만들겠다.

IE와 표준 브라우저의 이벤트에 대한 차이점

  • 이벤트를 등록, 해제하는 메소드가 다르다.
    • IE : attachEvent, detachEvent
    • 표준 브라우저 : addEventListener, removeEventListener
  • 이벤트 지정 문자열이 다르다. IE의 경우는 앞에 on이 붙음.
  • 이벤트 객체를 받는 방법이 다르다.
    • IE : window.event 객체로 전달 받음.
    • 표준 브라우저 : callback 함수에서 인자로 전달 받음.
  • 기본 이벤트의 실행 방지 방법이 다르다.
    • IE : return 값에 의해서 결정된다.
    • 표준 브라우저 : preventDefault 메소드를 사용해서 결정한다.

자주 사용하는 이벤트 리스트

  • click : 마우스 클릭
  • mouseover : 마우스 오버
  • mouseout : 마우스 아웃
  • change : 셀렉트박스의 값이 달라졌을 때
  • scroll : 스크롤 되었을 때
  • resize : 사이즈가 변경 되었을 때
  • keyup : 키가 눌린 후 뗄 때
  • focus : 포커스
  • blur : 포커스 해제 되었을 때

캡쳐와 버블링

이벤트는 최상위 엘리먼트로부터 이벤트가 발생한 엘리먼트까지 찾아 들어간 후 다시 최상위 요소까지 올라가며 이벤트를 발생한다. 여기서 이벤트가 발생한 엘리먼트까지 들어가는 과정을 이벤트 캡쳐라 하고, 최상위 요소까지 다시 올라가는 과정을 이벤트 버블링이라고 한다.

예제

지금까지 얘기한 이벤트를 실제 사용한 예제를 만들겠다.

HTML

CSS

Javascript

 

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다