jQuery addEventListener

오늘 포스팅에서는 jQuery의 addEventListener 함수에 대해 알아보겠습니다.

jQuery의 AddEventListener

JavaScript는 EventTarget 인터페이스의 내장 addEventListener() 메소드를 제공합니다. 이 메서드는 지정된 이벤트가 대상으로 전송될 때마다 호출되도록 함수를 구성합니다.

jQuery는 .on()이라는 동등한 메소드를 제공합니다. JavaScript의 addEventListener 메소드와 유사하게 .on 메소드는 하나 이상의 이벤트에 대해 선택된 요소에 이벤트 핸들러 함수를 연결합니다.

통사론:

.on(events[, selector][, data], handler)

1. Events는 공백과 선택적 네임스페이스로 구분된 하나 이상의 이벤트 유형을 나타내는 문자열입니다(예: Click 또는 keydown.myPlugin).
2. selector는 이벤트를 트리거하는 선택된 요소의 하위 항목을 필터링하기 위한 선택/일치 문자열을 나타냅니다. selector가 전달되지 않거나 null이면 선택한 요소에 도달할 때마다 이벤트가 전달됩니다.
3. Data는 이벤트가 발생하면 event.data의 컨트롤러로 전달됩니다.
4. handler는 이벤트가 발생할 때 실행되는 함수입니다. handler 함수가 null을 반환하면 false 값도 바로 가기로 허용됩니다.

현재 선택된 항목에 jQuery의 .on() 메소드는 이벤트 핸들러를 객체에 연결합니다. .on() 메서드는 이벤트 핸들러를 연결하는 모든 기능을 제공합니다.

이벤트 인수에는 모든 이벤트 이름을 사용할 수 있습니다. jQuery는 브라우저의 표준 JavaScript 이벤트 유형을 반복/반복하고 이벤트를 트리거하는 .click과 같은 사용자 작업으로 인해 브라우저가 실패할 때 handler 기능을 호출합니다.

.trigger() 기술을 사용하면 표준 브라우저 이벤트 이름과 사용자 정의 이벤트 이름이 연결된 핸들러를 호출할 수도 있습니다. 이벤트 이름은 최고의 영숫자 문자, 밑줄 및 콜론을 포함해야 합니다.

다음의 간단한 예를 통해 이해해 봅시다.

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {console.log('Click event is fired.')})

위의 코드 스니펫에서 버튼을 정의했습니다. 사용자가 버튼을 클릭하면 click 이벤트가 전달되고 handler 기능이 호출됩니다.

이는 on('click') 메서드를 내부적으로 트리거하는 .click() 메서드와 유사합니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 다음 결과가 표시됩니다.

"Click event is fired."

데모