JavaScript에서 addEventListener () 메서드를 구현하는 방법은 무엇입니까?



addEventListener ()는 이벤트를 수신하고 설명 된 이벤트가 시작될 때 호출되는 내장 JavaScript 함수입니다.

이벤트는 다음의 중요한 부분입니다. . 웹 페이지는 발생한 이벤트에 따라 응답합니다. 일부 이벤트는 사용자가 생성하고 일부는 API에 의해 생성됩니다. 이 기사에서는 이벤트가 발생하는 방식과 JavaScript의 addEventListener 메서드가 다음 순서로 사용되는 방식을 살펴 봅니다.

이벤트 리스너 란?

이벤트 리스너는 이벤트가 발생할 때까지 기다리는 JavaScript의 프로 시저입니다. 간단한 예 행사 사용자가 마우스를 클릭하거나 키보드의 키를 누르는 것입니다.





그만큼 addEventListener () 붙박이입니다 JavaScript 기능 수신 할 이벤트와 설명 된 이벤트가 시작될 때마다 호출 될 두 번째 인수를받습니다. 기존 이벤트 처리기를 덮어 쓰지 않고 원하는 수의 이벤트 처리기를 단일 요소에 추가 할 수 있습니다.

JavaScript의 addEventListener ()

일부 풍모 이벤트 리스너 메소드에는 다음이 포함됩니다.



  • 그만큼 addEventListener () 방법은 이벤트 핸들러 지정된 요소에.
  • 이 메서드는 이벤트 처리기를 덮어 쓰기 기존 이벤트 핸들러.
  • 당신은 추가 할 수 있습니다 많은 이벤트 핸들러 하나의 요소에.
  • 많은 이벤트 핸들러를 추가 할 수 있습니다. 같은 유형 하나에 요소 , 즉 두 개의 '클릭'이벤트.
  • 이벤트 리스너는 모든 심판 HTML 요소뿐만 아니라 개체. 즉, 창 개체입니다.
  • addEventListener () 메서드는 더 쉬움 제어 방법 이벤트 반응 버블 링.

addEventListener () 메서드를 사용할 때 JavaScript는 가독성을 높이고 HTML 마크 업을 제어하지 않는 경우에도 이벤트 리스너를 추가 할 수 있습니다.

또한 다음을 사용하여 이벤트 리스너를 쉽게 제거 할 수 있습니다. removeEventListener () 메서드 .

통사론:



target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantsUntrusted])

매개 변수 값

매개 변수 기술

행사

필수입니다. 이벤트의 이름을 지정하는 문자열입니다.

참고 : 'on'접두사는 사용하지 마십시오. 예를 들어 'onclick'대신 'click'을 사용하십시오.

모든 HTML DOM 이벤트 목록은 전체 HTML DOM 이벤트 객체 참조를 참조하십시오.

함수

필수입니다. 이벤트 발생시 실행할 기능을 지정합니다.

SQL을 배워야하는 이유

이벤트가 발생하면 이벤트 개체가 첫 번째 매개 변수로 함수에 전달됩니다. 이벤트 유형 목적 지정된 이벤트에 따라 다릅니다. 예를 들어 'click'이벤트는 MouseEvent 객체에 속합니다.

useCapture

선택 과목. 이벤트가 캡처 중 또는 버블 링 단계에서 실행되어야하는지 여부를 지정하는 부울 값입니다.

가능한 값 : true – 이벤트 처리기가 캡처 단계에서 실행됩니다. false-기본값입니다. 이벤트 핸들러는 버블 링 단계에서 실행됩니다.


이제 이벤트 리스너의 작동 방식을 알았으니 JavaScript에서 addEventListener ()의 예를 살펴 보겠습니다.

JavaScript의 addEventListener () : 예제

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt이 예제는 addEventListener () 메서드를 사용하여 사용자가 버튼을 클릭 할 때 함수를 실행합니다. & lt / p & gt & ltbutton id = 'myBtn'& gt 사용해보기 & lt / button & gt & ltp id = 'demo'& gt & ltscript & gt document.getElementById ( 'myBtn'). addEventListener ( 'click', myFunction) function myFunction () {document.getElementById ( 'demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

JavaScript의 addEventListener

이것으로 JavaScript에서이 addEventListener의 끝입니다. 이벤트 리스너가 방법 JavaScript에서 작동합니다.

우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.

질문이 있으십니까? 'JavaScript의 addEventListener'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.