자바스크립트 jquery 완전정복 스터디 2 CH7 이벤트 다루기

  • SUNGMIN SHIN
  • 9 Minutes
  • 2018년 3월 22일

[ 자바스크립트+jQuery 완전정복 스터디 2 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650875)


CH7 이벤트 다루기


lesson 01 - 이벤트 소개

01_이벤트란?

책 P242 참고


02_이벤트 종류

  1. 마우스 이벤트
    사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트, 화면상에서 마우스 버튼이 눌린 위치, ctrl키 또는 alt키를 누른 상태에서 마우스 버튼을 눌렀는지를 나타내는 정보가 담깁니다.

  2. 키보드 이벤트
    사용자가 키보드를 눌렀을 때 발생하는 이벤트로 이때 눌린 키에 대한 정보가 이벤트에 담깁니다.

  3. 태그요소 고유 이벤트
    엘리먼트마다 발생하는 고유의 이벤트로 예를 들어 ‘img’태그 요소의 경우 이미지가 모두 로드되면 load 이벤트를 발생시켜 이미지가 로드 됐음을 알리며 ‘input’ 태그 요소는 입력한 정보가 바뀌면 change 이벤트를 발생 시켜 입력 정보가 변경됐음을 알립니다.

  4. 사용자 정의 이벤트
    개발자가 직접 만들어서 사용하는 이벤트, 주로 개발자 고유 라이브러리 또는 클래스를 만들고 이를 사용한 어떤 작업이 끝났음을 사용자에게 알려줄 때 개발자만의 이벤트를 만들어 사용합니다.


03_이벤트 단계

자바스크립트 이벤트를 이해하려면 이벤트 흐름을 반드시 알고 있어야 합니다.
이벤트는 크게 3단계에 걸쳐 발생합니다.

  1. 캡쳐 단계
  2. 타깃 단계
  3. 버블링 단계

참고 - JAVASCRIPT EVENT PHASE 이벤트
http://derveljunit.tistory.com/236

메모

  1. 이벤트 흐름
    이벤트 흐름은 오직 DOM노드 객체를 따라 이동하며 사용자가 만든 객체에서는 절대 일어나지 않을뿐더러 이벤트를 흐르게 할 수도 없습니다.

  2. event.Phase 프로퍼티
    예제 코드에서 event.Phase는 이벤트 단계를 알 수 있는 프로퍼티 입니다.
    0 - none
    1 - 캡쳐
    2 - 타겟
    3 - 버블링


단계 01_캡처(Capture) 단계

01_설명

가장 먼저 실행되는 이벤트 단계로서, 이벤트 흐름은 가장 취상위 노드인 document에서 시작해 html태그와 body태그를 거쳐 실제 이벤트를 발생시킨 #b2 노드 전까지 흐르게되며 이단계를 캡쳐 단계라고 부릅니다.
이때 지나오며 만나는 노드 중 캡쳐 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행됩니다.


02_이벤트 등록 방법

Javascript
var eleBtn = document.getElementById(‘#btn’); // 대상
eleBtn.addEventListener(‘이벤트명’, 리스터, true);

jQuery
$대상.get(0).addEventListener(‘이벤트명’, 리스너, true);

jQuery에 경우 캡쳐 단계에 이벤트를 등록하는 기능을 제공하지 않아 위와 같이 자바스크립트의 DOM에 접근해 자바스크립트 방식을 이벤트를 등록해야 합니다.


03_캡쳐 단계의 용도

캡쳐 단계의 용도는 주로 타깃/버블링 단계의 이벤트 실행 전에 처리해야할 사전 작업 또는 타깃/버블링 단계 이벤트를 제어하는 용도로 아주 가끔 사용합니다.


단계 02_타깃(target) 단계

01_설명

타깃 단계는 이벤트 흐름이 이벤트를 발생시킨 노드에 머무르는 단계를 말하며 이때 이벤트를 발생시킨 노드에 이벤트가 등록되어 있다면 리스너가 실행됩니다.


02_이벤트 등록 방법

Javascript
var eleBtn = document.getElementById(‘#btn’); // 대상
eleBtn.addEventListener(‘이벤트명’, 리스터, false);

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


단계 03_버블(bubble) 단계

01_설명

버블 단계는 캡처 단계의 역순으로 흐르는 단계를 의미합니다.
그리고 이 흐름을 버블링(bubbling)이라고 부릅니다.

버블링의 예


02_이벤트 등록 방법

Javascript
var eleBtn = document.getElementById(‘#btn’); // 대상
eleBtn.addEventListener(‘이벤트명’, 리스터, false);

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

타깃 단계와 버블 단계에 이벤트를 등록하는 방법은 동일합니다.
타깃 단계인지 버블 단계인지 구분할때는 Event 객체와 eventPhase 속성을 사용하면 됩니다.

eventPhase속성을 통한 버블링 차단

JS 버블링(Bubbling) & 캡쳐링(Capturing)
https://project42da.github.io/js/2017/01/30/js-bubblingcapturing/


lesson 02 - 핵심 내용

01_일반 이벤트 등록

$대상.on(‘이벤트이름’, 리스너)

참고

jQuery 버전 1.6까지는 bind() 메서드를 사용했지만 1.7이후 on()으로 변경되었습니다. 이와 동시에 live(), delegate() 등의 이벤트 메서드도 on()에 통합되었습니다.


02_단축 이벤트 등록

$대상.단축이벤트(리스너)

1
2
3
4
5
6
7
8
9
// on() 메서드 사용
$('button').on('click', function(){
  alert('hello');
});

// 단축 메서드 click() 사용
$('button').click(function(){
  alert('hello');
});

jQuery에서는 일반적으로 많이 사용하는 이벤트를 좀 더 쉽게 사용할 수 있게 단축 이벤트 메서드를 가지고 있습니다.
예를 들어 click이벤트를 등록하는 경우 단축 이벤트 메서드를 사용하면 다음과 같이 click() 메서드를 이용해 간결하게 처리할 수 있습니다.

단축 이벤트 메서드 내부에서는 on() 메서드를 사용하기 때문에 두 방법 중 여러분이 편한 방법을 사용하면 됩니다.

jQuery 이벤트 목록
https://api.jquery.com/category/events/


03_등록한 이벤트 제거

지정한 이벤트(click등) 중 특정 리스너 제거
$대상.off(‘이벤트이름’, 삭제하고 싶은 리스너 명)


지정한 이벤트(click등) 제거
$대상.off(‘이벤트이름’)


대상의 이벤트 전부 제거
$대상.off(‘이벤트이름’)


04_이벤트 한 번만 실행

$대상.one(‘이벤트이름’, 리스너)

one()메서드를 통해 등록된 이벤트 리스너는 한번 실행되고 자동 제거 됩니다.

05_기본 행동 취소

event.preventDefault()

a태그 클릭 시 click이벤트 발생 후 해당 링크로 이동하게 되는 데 여기서 해당 링크로 이동하는 행동을 기본행동이라고 합니다.

모든 이벤트가 기본 행동을 취소할 수 있는 건 아닙니다. 이벤트 발생 후 실행되는 기본행동이 알려면 이벤트 객체의 cancelable 프로퍼티의 값을 확인하는 것으로 알 수 있으며 값이 true인 경우 기본 행동이 실행된다는 의미 입니다.

기본행동 관련속성 P264 ~ 확인

© 2019 windfanta.github.io/blog
POWER BY HEXO, THEME BY LAUGHING