티스토리 뷰

HTML , CSS , JS

Event listener(1)

플레지 2019. 6. 8. 23:01

모든 수업내용 자료는 tcpschool의 자료임을 밝힙니다.

이벤트 리스너(event listener)

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다.

지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다.


이벤트 리스너 등록

작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있습니다.

객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같습니다.

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법

2. 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법


객체나 요소에 프로퍼티로 등록하는 방법

객체나 요소에 프로퍼티로 이벤트 리스너를 등록할 때는 다음과 같은 방법을 사용할 수 있습니다.

1. 자바스크립트 코드에서 프로퍼티로 등록

2. HTML 태그에 속성으로 등록

자바스크립트 코드에서 프로퍼티로 등록하는 방법은 거의 모든 브라우저가 대부분의 이벤트 타입을 지원하고 있습니다.

이 방법의 단점은 이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있다는 점입니다.

--> 이방법으로 구현하면 아주 쉽게 할 수 있으나 여러 개의 속성을 부가하려면 여러 개를 여러 개 만들어야 하고 아무튼 효율적이지 못하다.  onclick , alert 등이 이에 속한다.


객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법

객체나 요소의 메소드에 이벤트 리스너를 전달할 때는 다음 메서드를 사용할 수 있습니다.

1. addEventListener()

2. attachEvent()

addEventListener() 메서드는 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메서드입니다.

 

이벤트 리스너가 하나밖에 없어서 간단해 보인다.


여러 개의 이벤트 리스너 등록

addEventListener() 메서드를 사용하면, 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있습니다.


이벤트 리스너 삭제

removeEventListener() 메소드를 사용하면, 등록된 이벤트 리스너를 손쉽게 삭제할 수 있습니다

 

'HTML , CSS , JS' 카테고리의 다른 글

Webstyle4(scrollEffect)  (0) 2019.06.22
Webstyle2  (0) 2019.06.22
Change HTML element content using with Dom  (0) 2019.06.08
CSS 선택자querySelectorAll()  (0) 2019.06.08
HTML 태그 이름(tag name)을 이용한 선택  (0) 2019.06.08
댓글