addEventListener () 메서드 – JavaScript 이벤트 리스너 예제 코드

프로그램 작성

JavaScript addEventListener () 메서드를 사용하면 사용자가 버튼을 클릭 할 때와 같이 지정된 이벤트가 발생할 때 호출 할 함수를 설정할 수 있습니다. 이 튜토리얼은 코드에서 addEventListener ()를 구현하는 방법을 보여줍니다.

이벤트 및 이벤트 처리기 이해

이벤트 는 사용자 또는 브라우저가 페이지를 조작 할 때 발생하는 작업입니다. 웹 페이지의 요소를 동적으로 변경할 수 있으므로 중요한 역할을합니다.

예를 들어, 브라우저가 문서로드를 완료하면 load이벤트가 발생했습니다. 사용자가 페이지의 버튼을 클릭하면 click이벤트가 발생한 것입니다.

많은 이벤트가 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 이벤트가 언제 발생할지, 특히 사용자가 생성 한 경우 알 수 없습니다.

이러한 시나리오에서는 이벤트 발생시기를 감지 하는 이벤트 처리기 가 필요 합니다. 이렇게하면 이벤트가 즉석에서 발생할 때 반응하도록 코드를 설정할 수 있습니다.

JavaScript는 addEventListener()메서드 형식으로 이벤트 처리기를 제공합니다 . 이 핸들러는 이벤트를 모니터링하려는 특정 HTML 요소에 첨부 될 수 있으며 요소에는 둘 이상의 핸들러가 첨부 될 수 있습니다.

addEventListener () 구문

구문은 다음과 같습니다.

target.addEventListener(event, function, useCapture)
  • target : 이벤트 핸들러를 추가하려는 HTML 요소. 이 요소는 DOM (Document Object Model)의 일부로 존재하며 DOM 요소를 선택하는 방법에 대해 배울 수 있습니다.
  • event : 이벤트 의 이름을 지정하는 문자열. 우리는 이미 언급 load및 click이벤트. 궁금한 사람을 위해 여기에 HTML DOM 이벤트의 전체 목록이 있습니다.
  • function : 이벤트 감지시 실행할 기능을 지정합니다. 이것은 웹 페이지를 동적으로 변경할 수있는 마법입니다.
  • useCapture : 캡처 또는 버블 링 단계에서 이벤트를 실행해야하는지 여부를 지정하는 선택적 부울 값 (true 또는 false)입니다. (이러한 중첩 된 HTML 요소의 경우 img내의 div연결된 이벤트 핸들러),이 값은 먼저 실행 도착하는 이벤트를 판단한다. 기본적으로 false로 설정되어있어 가장 안쪽의 HTML 이벤트 핸들러가 먼저 실행됩니다 (버블 링 단계).

addEventListener () 코드 예제

이것은 내가 만든 간단한 예제로 여러분 addEventListener()의 행동 을 보여줍니다 .

사용자가 버튼을 클릭하면 메시지가 표시됩니다. 다른 버튼을 클릭하면 메시지가 숨겨집니다. 관련 JavaScript는 다음과 같습니다.

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); })

에 대해 이전에 표시된 구문으로 이동합니다 addEventListener().

  • target : HTML 요소id='button'
  • function : 메시지 표시 / 숨기기에 필요한 코드를 설정하는 익명 (화살표) 기능
  • useCapture : 기본값으로 남음false

내 함수는 메시지 요소의 가시성을 변경하는 "reveal"이라는 CSS 클래스를 추가 / 제거하여 메시지를 표시하거나 숨길 수 있습니다.

물론 코드에서이 기능을 자유롭게 사용자 정의 할 수 있습니다. 익명 함수를 자신의 명명 된 함수로 바꿀 수도 있습니다.

매개 변수로 이벤트 전달

클릭 한 요소와 같은 이벤트에 대한 자세한 정보를 알고 싶을 때가 있습니다. 이 상황에서는 이벤트 매개 변수를 함수에 전달해야합니다.

이 예는 요소의 ID를 얻는 방법을 보여줍니다.

button.addEventListener('click', (e)=>{ console.log(e.target.id) })

여기서 이벤트 매개 변수는 이름이 지정된 변수 e이지만 "event"와 같은 다른 이름으로 쉽게 불릴 수 있습니다. 이 매개 변수는 대상 ID와 같은 이벤트에 대한 다양한 정보를 포함하는 개체입니다.

특별한 작업을 수행 할 필요가 없으며 JavaScript는 이러한 방식으로 함수에 매개 변수를 전달할 때 수행 할 작업을 자동으로 인식합니다.

이벤트 처리기 제거

어떤 이유로 이벤트 핸들러가 더 이상 활성화되는 것을 원하지 않는 경우 제거하는 방법은 다음과 같습니다.

target.removeEventListener(event, function, useCapture);

매개 변수는와 동일합니다 addEventListener().

연습이 완벽 해집니다

The best way to get better with event handlers is to practice with your own code.

Here is an example project I did in which I used event handlers to change the color, size, and speed of bubbles flowing across the background of a web page (you will need to click on the central panel to reveal the controls).

Have fun and go make something awesome!

For more beginner-friendly web development knowledge, visit my blog at 1000 Mile World and follow me on Twitter.