JavaScript의 addEventListener 메소드와 동등한 jQuery

190

이 JavaScript 메소드 호출과 동등한 jQuery를 찾으려고합니다.

document.addEventListener('click', select_element, true);

나는 다음과 같이 얻었습니다.

$(document).click(select_element);

그러나 JavaScript 메소드의 마지막 매개 변수와 동일한 결과를 얻지 못합니다. 이벤트 처리기가 캡처 또는 버블 링 단계에서 실행되어야하는지 여부를 나타내는 부울입니다 ( http://www.quirksmode.org 에서 이해함) . /js/events_advanced.html)- 제외되었습니다.

jQuery를 사용하여 해당 매개 변수를 지정하거나 동일한 기능을 수행하려면 어떻게합니까?

— 서투른 솜씨
소스

3

jQuery가 지원하는 IE에서 이벤트 캡처를 지원하지 않으므로 jQuery에서는 이벤트 캡처를 지원하지 않습니다.;) IE 호환성을 찾고 있습니까?

— 초승달

고맙습니다, 초승달 신선한-나는 그것이 의미가 있다고 생각합니다. IE 호환성이 필요하므로 캡처 단계를 잊어야한다고 가정합니다.

— Bungle

142

모든 브라우저가 이벤트 캡처를 지원하지는 않지만 (예 : 9 미만의 Internet Explorer 버전은 지원하지 않음) 모두 이벤트 버블 링을 지원하므로 jQuery에 포함 된 모든 크로스 브라우저 추상화의 이벤트에 핸들러를 바인딩하는 데 사용되는 단계입니다.

jQuery에서 찾고있는 것에 가장 가까운 것은 bind()( on()jQuery 1.7 이상에서 대체 됨 ) 또는 이벤트 특정 jQuery 메소드 (이 경우 내부적 click()으로 호출되는 bind())입니다. 모두는 발생한 이벤트의 버블 링 단계를 사용합니다.

— 러스 캠
소스

6

IE9가 마침내 지원하는 것처럼 보입니다. blogs.msdn.com/b/ie/archive/2010/03/26/…

— 일부

왜 이벤트 캡처를 지원하지 않습니까? 이벤트 캡처의 단점은 무엇입니까?

— Aakash

2

분명하게 말하면 OP가 원하는 것은 불가능하다는 것입니다. 버블 링을 사용해야하고 캡처를 사용할 수 없습니다. 권리?

— 누 메논

115

jQuery 1.7 .on()부터는 다음과 같은 것이 아니라 선호되는 이벤트 바인딩 방법입니다 .bind().

에서 http://api.jquery.com/bind/ :

jQuery 1.7부터 .on () 메소드는 문서에 이벤트 핸들러를 첨부하는 데 선호되는 메소드입니다. 이전 버전의 경우 .bind () 메소드는 이벤트 핸들러를 요소에 직접 첨부하는 데 사용됩니다. 핸들러는 jQuery 객체에서 현재 선택된 요소에 첨부되므로 .bind ()에 대한 호출이 발생하는 시점에 해당 요소가 존재해야합니다. 보다 유연한 이벤트 바인딩에 대해서는 .on () 또는 .delegate ()에서 이벤트 위임에 대한 설명을 참조하십시오.

설명서 페이지는 http://api.jquery.com/on/에 있습니다.

수락 된 답변이이 문제를 해결하기 위해 편집되었습니다.

— 사용자가 아닌 사용자

51

가장 가까운 것은 bind 함수입니다.

http://api.jquery.com/bind/

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

— 벤 로우
소스

14

주목해야 할 것은 jQuery 이벤트 메소드는 태그에 별도의 문서로로드되는 SVG DOM이 포함 load된 embed태그에서 실행 / 트랩되지 않는다는 것 embed입니다. load이벤트 를 잡는 유일한 방법 은 원시 JavaScript를 사용하는 것입니다.

이것은 작동하지 않습니다 ( on/ bind/ load방법을 시도했습니다 ).

$img.on('load', function () {
    console.log('FOO!');
});

그러나 이것은 작동합니다.

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);

— tbjers
소스

1

요소에 대한 다른 바운드 이벤트 핸들러를 덮어 쓰지 않으려는 경우 이것이 올바른 방법입니다.

— r3wt

무엇 $img입니까?

— anatol

12

이제 .on()함수를 사용하여 이벤트를 바인드해야합니다.

2

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

스 니펫 확장

— 사전 사랑
소스

1

다음은 표준 JavaScript에 대한이 문제의 MDN (Mozilla Development Network)에 대한 훌륭한 처리 방법입니다 (jQuery에 의존하지 않거나 일반적으로 더 잘 이해하지 않으려는 경우).

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

위의 처리에서 링크의 이벤트 흐름에 대한 설명은 다음과 같습니다.

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

몇 가지 핵심 사항은 다음과 같습니다.

이벤트에 대해 둘 이상의 핸들러를 추가 할 수 있습니다.
리스너가 활성화 될 때 단계를보다 세밀하게 제어 할 수 있습니다 (캡처 및 버블 링).
HTML 요소뿐만 아니라 모든 DOM 요소에서 작동합니다.
이벤트에 전달 된 "this"값은 전역 객체 (창)가 아니라 요소가 시작된 요소입니다. 이것은 매우 편리합니다.
레거시 IE 브라우저 용 코드는 간단하며 "레거시 Internet Explorer 및 attachEvent"제목에 포함되어 있습니다.
익명 함수로 처리기를 묶는 경우 매개 변수를 포함 할 수 있습니다

— 병리학
소스