이벤트는 다음의 중요한 부분입니다. . 웹 페이지는 발생한 이벤트에 따라 응답합니다. 일부 이벤트는 사용자가 생성하고 일부는 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에서 작동합니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'JavaScript의 addEventListener'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.