이벤트 다루기

이벤트란? 

일종의 알림기능 이라고 생각하면 된다.

웹페이지에서 사용자가 마우스를 클릭하거나 키보드의 키를 입력하면 브라우저는 입력정보(클릭 위치, 버튼, 키값 등)를 이벤트에 담아 개발자에게 알려준다.

이벤트 종류

(1) 마우스 이벤트

(2) 키보드 이벤트

(3) 태그 고유 요소 이벤트(img - load, input - change)

(4) 사용자 정의 이벤트

이벤트 단계

1) 캡처

2) 타깃

3) 버블링 

(1) 일반 이벤트 등록

$대상.on('이벤트 이름', '이벤트 리스너');

:

(2) 단축 이벤트 등록

   가. on() 메서드 사용

   $대상.on("click", funtion(){ });

   나. click() 메서드 사용(단축메서드)

   $대상.click(function(){ });

-> 단축 메서드 

 : blur , change, load, unload, resize, scroll, select, submit, click, dbclick, mousedown, mouseup, mouseup, mousemove, mouseover, mouseout, mouseseenter, mouseleave, focus, keydown, keypress, keyup 등

(3) 등록한 이벤트 제거

등록한 이벤트를 제거하려면 off()를 사용

 1) 특정 이벤트에 대한 이벤트 리스너를 제거하고 싶을 때

  : $대상.off('click', 삭제하고 싶은 리스너명)

 2) 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우

  : $대상.off("click")

 3) 모든 이벤트 종류에 상관없이 모든 이벤트를 제거하고 싶은 경우

  : $대상.off()

(4) 이벤트 한번만 실행

.one()

: 이벤트를 한번만 실행

https://jsfiddle.net/jywoo/9x0gpfz8/4/

-----------------------------------------------------------------------------------------------------------------------------------------------

(5) 기본 행동 취소

event.preventDefault()

기본행동이란?  a태그 클릭시 click이벤트 발생 후 링크로 이동 <- 이런 행동을 기본행동이라함

(6) 버블링 멈추기

event.stopPropagation()

이벤트 흐름의 마지막 단계인 버블링을 멈추는 메소드, 버블링이 일어나는 이벤트가 따로 설정되어있음

click, focusout, focusin, input, keydown, keyup, mousedown, mouseout, mousemove, mouseup, select, wheel

 메서드가 (이벤트 개체에서) 호출되었는지 여부를 확인 하는 데 사용할 수 있다 .

https://jsfiddle.net/jywoo/9wseLt06/1/