jQuery: 동일한 이벤트에 대한 두 개 이상의 핸들러

jQuery: 동일한 이벤트에 대한 두 개 이상의 핸들러

동일한 요소에 대해 두 이벤트 핸들러를 동일한 이벤트에 바인딩하면 어떻게 됩니까?

예:

var elem = $("...")
elem.click(...);
elem.click(...);

마지막 핸들러가 "승"합니까, 아니면 두 핸들러가 모두 실행됩니까?

두 핸들러가 모두 실행되며, jQuery 이벤트 모델은 하나의 요소에서 여러 핸들러를 허용하므로 이후 핸들러는 이전 핸들러를 재정의하지 않습니다.

처리기는 바인딩된 순서대로 실행됩니다.

두 개의 핸들러(f 및 g)가 있고 이러한 핸들러가 알려진 고정 순서로 실행되는지 확인한 다음 이를 캡슐화한다고 가정합니다.

$("...").click(function(event){
  f(event);
  g(event);
});

이런 방식으로 (jQuery의 관점에서) 지정된 순서대로 f와 g를 호출하는 핸들러는 하나뿐입니다.

jQuery의 .bind()는 바인딩된 순서대로 실행됩니다.

이벤트가 요소에 도달하면 해당 요소의 해당 이벤트 유형에 바인딩된 모든 처리기가 실행됩니다.등록된 처리기가 여러 개인 경우, 처리기는 항상 바인딩된 순서대로 실행됩니다.모든 처리기가 실행된 후에도 이벤트는 일반 이벤트 전파 경로를 따라 계속됩니다.

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

왜냐하면 jQuery의 다른 기능들(예:.click()의 바로 가기입니다..bind('click', handler)나는 그것들이 묶인 순서대로 작동한다고 추측합니다.

체인을 사용하여 이벤트를 순서대로 실행할 수 있어야 합니다. 예:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

아래 코드도 동일한 작업을 수행하고 있는 것 같습니다.

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

출처: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFM은 또한 다음과 같이 말합니다.

이벤트가 요소에 도달하면 해당 요소의 해당 이벤트 유형에 바인딩된 모든 처리기가 실행됩니다.등록된 처리기가 여러 개인 경우, 처리기는 항상 바인딩된 순서대로 실행됩니다.모든 처리기가 실행된 후에도 이벤트는 일반 이벤트 전파 경로를 따라 계속됩니다.

두 핸들러가 모두 호출됩니다.

인라인 이벤트 바인딩(예:"onclick=..."), 여기서 큰 단점은 이벤트에 대해 하나의 핸들러만 설정될 수 있다는 것입니다.

jQuery는 DOM 레벨 2 이벤트 등록 모델을 준수합니다.

DOM 이벤트 모델을 사용하면 단일 이벤트 대상에 여러 이벤트 수신기를 등록할 수 있습니다.이를 위해 이벤트 수신기는 더 이상 속성 값으로 저장되지 않습니다.

다음 두 가지 방법을 사용하여 성공적으로 작동했습니다.Stephan202의 캡슐화와 다수의 이벤트 청취자.3개의 검색 탭이 있습니다. 배열에서 입력 텍스트 ID를 정의합니다.

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

검색 탭 1의 내용이 바뀌면, 저는 검색 탭 2와 검색 탭 3을 업데이트하고 싶습니다.캡슐화를 위해 이 방법을 사용했습니까?

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

다중 이벤트 수신기:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

저는 두 가지 방법을 모두 좋아하지만 프로그래머는 캡슐화를 선택했지만 여러 이벤트 청취자도 작동했습니다.우리는 그것을 테스트하기 위해 크롬을 사용했습니다.

하나의 핸들러가 차례로 발생하도록 보장하기 위한 해결 방법이 있습니다. 두 번째 핸들러를 포함하는 요소에 연결하고 이벤트가 버블업되도록 합니다.컨테이너에 부착된 핸들러에서 event.target을 보고 관심 있는 핸들러라면 무엇인가를 할 수 있습니다.

조잡하지만, 확실히 효과가 있을 겁니다.

jquery는 여러 이벤트 핸들러를 허용하므로 두 핸들러를 모두 실행합니다.샘플 코드를 만들었습니다.해보세요

데모

언급URL : https://stackoverflow.com/questions/1491718/jquery-more-than-one-handler-for-same-event