[카테캠 7주차] JS 기초 Events

Events

이벤트 추가 및 제거

addEventListener

• 대상에 이벤트 청취(Listen)을 등록한다.
• 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출된다.

 

 

 

removeEventListener

• 대상에 등록했던 이벤트 청취(Listen)을 제거한다.
• 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있다.

removeEventListener를 사용하기 위해서는 핸들러를 함수로 분리하여 사용해야한다.

 

 

 

 

이벤트 객체

이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다.

 

event.currentTarget 

이벤트가 등록된 요소를 의미한다.

 

 

event.target

.이벤트가 발생한 요소를 의미한다

 

 

event 객체의 프로토타입을 살펴보면 mouseEvent로 부터 상속된 것을 살펴 볼 수 있다.

 

 

wheel 이벤트는 마우스의 가운데 휠을 움직일때 발생하는 이벤트이다.

whell 이벤트 객체의 deltaY는 스크롤이 내려올 때는 양수를 가지고 올라갈 때는 음수를 가진다.

이러한 정보로 사용자의 스크롤 방향을 알아낼 수 있다.

 

 

다음으로 많이 사용되는 이벤트는 'keydown' 이벤트이다.

 

 

 

기본 동작 방지

preventDefault 를 사용하면 HTML 요소의 기본동작을 막을 수 있다.

대표적인 예시는 a 태그, form 새로고침, 스크롤 방지 가 있다.

 

아래 코드처럼 wheel 이벤트가 발생할 때, preventDefault 가 실행되도록 하면 화면상에서 스크롤이 되지 않는다.

 

 

 

또한 a 태그를 클릭할 때,  preventDefault 가 실행되도록 하면 a 태그의 주요한 기능인 페이지 이동이 실행되지 않는다.

 

 

 

버블링과 캡쳐링

이벤트 버블링

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

a 태그의 텍스트를 클릭하면 다음과 같은 출력을 얻을 수 있다.

 

작은 범위에서 큰 범위로 이벤트가 전파되는 현상을 이벤트 버블링이라고 부른다.

 

 

이렇게 이벤트가 버블링 되는 현상을 막기위해서는 event 객체에 stopPropagation 메서드를 사용하면 된다.

 

 

 

이렇게 되면 parent class 를 가진 요소에서 상위 요소로 이벤트가 전파 되지 않는다.

 

 

이벤트 캡처링

{ capture : true } 옵션을 주지 않았을 경우에는 Child -> Parent -> Body -> Window 순으로 출력된다.

 

 

만약에 캡쳐 옵션을 주게 되면 출력되는 순서가 바뀐다.

 

 

이와 같은 현상이 발생하는 이유는 실상 이벤트 전파가 발생할 때 Target Phase 에서 Bubbling Phase 가 발생하기 전에 Capturing phase 가 발생하기 때문이다.

 

 

 

만약 캡처링 단계에서 이벤트가 정지되면 다음과 같은 출력을 얻을 수 있다.

같이 캡처링을 사용한 Window 와 이벤트 정지 메서드가 포함되어있는 Body까지만 출력된 모습이다.

 

 

 

이벤트 캡처를 사용할 떄 주의해야할 점은, addEventListener 를 사용하여 { capture : true } 를 사용했다면, remove 할 떄도 { capture: true } 를 사용해서 제거해줘야한다는 점이다.

 

 

 

이벤트 옵션

once 

이벤트 핸들러를 한번만 실행한다.

 

 

 

passive

기본 동작과 핸들러 실행 분리

passive 옵션의 쓰임 용도는 wheel 이나 touchstart 같은 이벤트가 발생할 때 이벤트 핸들러의 비용이 크다면 사용자에게 매끄러운 UX 를 줄 수 없다.

그리고 passive 가 false 인 경우에는 이벤트 핸들러가 동작하는동안 preventDefault 가 호출되는 것 같다. 그 후 이벤트 핸들러의 동작이 완료되면 스크롤과 같은 이벤트가 발생하는 것이다.

passive 가 true 가 된다면, 이러한 preventDefault 가 호출되지 않아 기본동작과 핸들러 실행이 분리된다고 할 수 있다.

https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners

 

 

 

 

이벤트 위임

• 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우
• 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있다.
• 자식 요소가 동적 추가되는 경우

 

사용될 HTML 코드는 다음과 같다.

 

 

 

마우스와 포인터 이벤트

mouseenter 와 mouseleave 를 사용하면 js 로 hover 기능을 만들 수 있다.

 

 

 

mousemove 의 이벤트 객체의 offsetX, offsetY 를 사용하면 특정한 요소내부에서 포인트가 어디에 위치하는지에 대한 정보를 얻을 수 있다.

 

 

 

 

contextmenu 를 사용하면 우클릭 했을 때의 메뉴 기능을 preventDefault 할 수 있다.

 

 

 

키보드 이벤트

 

 

 

 

이전에 한번 정리했던 적이 있는데 한글을 입력하는 경우에 keydown 이벤트가 발생하면 두번 이벤트가 발생한다.

한글 뿐만 아니라 중국어, 일본어에도 발생한다고 한다. (CJK 문자)

 

 

 

이러한 오류를 막기 위해서는 isComposing 을 사용해야한다.

isComposing은 CJK 문자를 처리하는 과정인지를 bollean 데이터로 가지고 있는 속성이다.

따라서 isComposing이 true 일때 이벤트가 한번, isComposing이 false 일때 이벤트가 한번 출력된다.

 

 

 

따라서 CJK 문자가 끝났을때만 이벤트가 출력하게 하면 되기 때문에 다음과 같이 코드를 작성하면 된다.

 

 

 

 

 

양식과 포커스 이벤트

 

input 이벤트와 change 이벤트의 차이

input 이벤트는 input 요소에 키가 입력될때마다 발생한다. 반면에 change 이벤트는 tab, enter 와 같은 키가 동작해서 상태가 변경되야 동작한다.

 

 

submit 이벤트

 

 

 

단 submit 이벤트는 form 태그의 submit type 버튼이 동작할 때 발생한다.

 

 

 

또한 submit 이벤트가 발생하면 새로고침이 발생하는데 preventDefault 를 사용하면 새로고침 동작을 막을 수 있다.

 

 

 

 

reset 이벤트

 

 

reset 이벤트 또한 form 의 reset type 버튼이 동작할 때 발생한다.

 

 

 

 

 

커스텀 이벤트

 

 

 

dispatchEvent 를 사용하여 강제로 이벤트가 발생하게 할 수 있다.

 

 

 

 

또한 아예 존재하지 않는 이벤트를 생성할 수도 있다.

 

 

 

CustomEvent 의 Detail 속성

생성한 이벤트에 데이터를 추가하여 보내고 싶을 수 있다. 

이럴 때 Detail 속성을 사용할 수 있는데, 이때, Event가 아닌 CustomEvent 생성자를 사용하여 이벤트를 생성해야한다.