커스텀 이벤트

커스텀 이벤트

객체지향 프로그래밍에서 객체와 객체 사이의 관계를 느슨하게 연결하는 수단으로 사용됨

var event = new Event('build');

// 이벤트 리슨
elem.addEventListener('build', funtion(e) { /* */ }, false);

// 이벤트 디스패치
elem.dispatch(event);

Event 생성자는 Internet Explorer를 제외하고 대부분의 브라우서에서 지원됨.

하단의 내용은 Event생성자를 사용하지 않고 쓰는 방법이다.

MDN에서 오래된 방법이라고 소개됨.

var event = document.createEvent(type);

// 1. 이벤트 생성
var event = document.createEvent('Event');

'Event'에 들어갈 수 있는 주요 이벤트 타입은 아래 표를 참고

1번에서 생성된 event 객체에는 이벤트의 타입에 따라 별도의 '초기화 메서드'로 초기화 작업이 필요하다

// 2. 이벤트 이름을 'build'라 정의하려고 한다면

event.initEvent('build', true, true);

initEvent메소드의 인수는 다음과 같다.

event.initEvent(type, bubbles, cancelable);

- type : 이벤트 유형을 뜻하는 문자열("click", "mouseup" 등)
- bubbles : 버블링할지를 나타내는 논리값
- cancelable : 취소할 수 있는 이벤트로 만들지 나타내는 논리값

// 3. 이벤트 리슨
elem.addEventLsitener('build', function(e) {
    // e.target은 elem과 일치
}, false);

target은 어떤 엘리먼트나 다른 이벤트 타겟이 될 수 있음.

target.dispatchEvent(event);

// 4. 이벤트 보내기
ele.dispatchEvent(event);

커스텀 이벤트와 표준 이벤트의 차이점

사용자가 클릭등의 행위로 발생시킨 표준이벤트와 자바스크립트 코드로 보낸 커스텀이벤트는

isTrusted 프로퍼티로 구별가능.

isTrusted = true , 표준 이벤트

isTrusted = false , 커스텀 이벤트

Custom Events in Javascript (CustomEvent)