노마드코더 Js : superEventHandler

갑자기 superEventHandler을 사용하라고해서 당황했었다. 그냥 이름인가? 했는데 그건 또 아니었음^^

새로 배운 거라 간단히 정리해보겠다.

 

1. superEventHandler 란?

: 메서드. 지정한 유형의 이벤트를 대상이 수신할 때 마다 호출할 함수를 설정할 수 있음. 즉, 메서드 안에 여러 함수를 넣을 수 있다는 말임. 

 

2. 호출

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

type: 수신할 이벤트 유형, 대소문자 구분 문자열

listener : 지정한 이벤트를 수신할 객체, handleEvent() 메서드를 포함하는 객체 또는 Js 함수여야함

Options : 이벤트 수신기의 특징을 지정할 수 있는 객체

useCapture: 이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값. 기본값은 false

 

3. 반환값

: 없음

 

4. 예시

const superEventHandler = {
    'sayHello': () => {
        console.log('Hello!');
    },

    'sayHi': () => {
        console.log('Hi!');
    },

    'sayLikeThis': (text) => {
        console.log(text);
    },

    someData: "이렇게 데이터도 가질 수 있지요",
}

 

4-1. 함수 호출

superEventHandler.sayHello()
//Hello!

superEventHandler.sayHi()
//Hi!

superEventHandler.sayLikeThis('HO!!!')
//HO!!!

superEventHandler.someData
//"이렇게 데이터도 가질 수 있지요"

 

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

 

//슬랙의 Pengoose 님과 Mdn 참고