Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

웹 프로그래밍

jQuery 이벤트에 대해 알아보기 😉

✿도담도담 2018. 7. 11. 17:26

jQuery 이벤트를 공부하다 세부적으로 돌아가는 부분에 대해 정리해보고자 한다 !

우선 "이벤트"라고 하면 이름만 들어도 감이 올 듯한데 책에서는 일종의 "알림 기능"이라 설명하고 있다.

이벤트 종류로는 크게 마우스 이벤트, 키보드 이벤트, 태그요소 고유 이벤트, 사용자 정의 이벤트 이렇게 4종류로 나뉜다.

*태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트

(ex. img 태그 요소 경우 이미지가 모두 로드 될 시 load 이벤트 발생 )


그리고 가장 중요한 이벤트 단계에 대해 자세히 알아보자.


책의 그림이 명확히 이해되도록 되어있어 첨부하고 싶은데 스캔할 수가 없다...😥


1단계 "캡쳐 단계"는 가장 먼저 실행 되는 이벤트 단계로써, 

흐름은 가장 최상위 노드(document)부터 순서대로 html > body 태그를 거쳐 실제 이벤트를 발생 시킨 노드 전까지를 말한다.

지나오며 만나는 노드에 이벤트 리스너가 등록돼 있다면 리스너가 실행 된다.

여기서 jQuery에는 캡쳐 단계에 이벤트를 등록하는 기능이 없다!

따라서 자바스크립트 DOM에 접근해 사용해야한다. ( addEventListener() )


2단계로 "타깃 단계"는 이벤트를 발생시킨 노드에 머무르는 단계이다.

이벤트는 on()메소드를 사용해 등록하면 된다.

자바스크립트에서는 캡쳐 단계에서 사용하는 메소드와 동일하게 사용하되 마지막 매개 변수를 false로 줘야한다.


마지막으로 "버블 단계"이다.

( 예전에 아무것도 모르고 멘땅에 해딩할 때 이 단계에서 많이 헤맸고 다른사람들도 많이 검색을 하던 부분인듯... )

버블 단계는 캡처 단계의 역순으로 흐르는 단계이며 이 흐름을 우리는 버블링(bubbling)이라 한다.

이 단계 또한 만나는 노드에 이벤트 리스너가 있을 시 실행된다.

이벤트 등록은 2단계와 같이 on() 메소드로 한다.

.

.

.

이벤트 객체는 이벤트를 발생시키는 곳에서 이벤트와 관련된 정보를 담아 외부로 보낼 때 사용하는 일종의 "저장소"이다.

Event 객체의 내부이다!


type : 발생한 이벤트 이름

target : 실제 이벤트를 발생시킨 대상

currentTarget : 캡처 단계, 버블링 단계를 지나오면서 만나는 객체중 

                               이벤트 리스너가 등록돼 있을 경우 리스너를 가지고 있는 대상

eventPhase : 현재 이벤트의 위치에 관한 정보 👍

1 = 캡쳐 단계  /  2 = 타깃 단계  /  3 = 버블 단계

cancelable과 preventDefault() :  cancelable이 true인 경우

기본 행동 ( 특정 이벤트 발생 후 실행되는 기능 )을 실행 되지 않게 취소

bubbles와 stopPropagation() : bubbles가 true라면 현재 발생 이벤트는 버블링이 발생하는 이벤트이며

버블링 도중 중지해야하는 경우 stopPropagtaion()메소드를 사용


아마 예전에 이벤트 발생 노드의 부모 노드 이벤트까지 실행되는 문제점이 있다며 질문한 글을 봤는데

이때 사용해야 하는게 stopPropagtaion()이 아닌가 싶다 ! ( 알게 되서 기분이 좋은..😚 )


jQuery 이벤트에 대해 깊이 공부해봤다 :) 끝!