[Javascript] 자바스크립트 이벤트 구현하는 법

---

---

# 코드

- 이벤트 리스너 만들기

document.addEventListener('DOMContentLoaded', function() => {

  // start ...

})

>  HTML을 파싱한뒤 DOM 객체를 생성이 완료되면 ‘DOMContentLoaded’ 이벤트가 발생한다. 우리는 이 이벤트에 리스너를 추가하는 방식으로 똑같이 구현할 수 있다.

---

- 클릭 이벤트 만들기

document.querySelector('a').addEventListener('click', evt => {

  // 이벤트 처리 ...

})

or

document.querySelector('a').click()

> a태그를 가져와 클릭 이벤트를 작성한다.

---

- 커스텀 이벤트 만들기

const evt = new CustomEvent('@click')

document.dispatchEvent(evt)

> 단순 클릭 이벤트

const evt = new CustomEvent('@click', {detail: 'some data'})

document.dispatchEvent(evt)

> CustomEvent 클래스로 이벤트 객체를 만들고 

document.dispatchEvent() 함수로 이벤트를 방출한다. 

이벤트와 더불어 데이터도 넘겨줄 수 있다.

document.querySelector('a').addEventListener('@click', evt => {

  evt.detail // 'some data'

}) 

> CustomEvent 생성시 두번째 인자로 detail 키를 갖는 객채만 넘겨주면 

수신하는 측에서는 이 값을 사용할 수 있다. 문자열 뿐만 아니라 객체도 가능하다.

const evt = document.createEvent('CustomEvent')

evt.initCustomeEvent('@click', true, false, 'some data')

document.dispatchEvent(evt)

> IE11 이하 버전에서는 CustomEvent를 지원하지 않기 때문에 

이벤트 생성하는 방법을 달리 해야한다.

document.createEvent() 함수로 생성한 이벤트 객체의 

initCustomeEvent() 함수로 이벤트 명과 전달할 데이터를 설정한다.

매개변수는 순서대로 이벤트명, 버블(bubble)?, 취송가능여부(cancelable)?, 

전달할 데이터(detail)를 의미한다.

# 마무리

위 포스트는 제가 직접 제작한 것 입니다.

그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.

만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.

빠른 처리 하도록 하겠습니다.

티스토리 앱으로는 댓글 이용이 불가능 하므로 웹 브라우저로 봐 주세요

(URL : http://junprogramer.tistory.com/)

읽어주셔서 감사합니다.