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 이벤트 모델을 사용하면 단일 EventTarget에서 여러 이벤트 리스너를 등록 할 수 있습니다. 이를 위해 이벤트 리스너는 더 이상 속성 값으로 저장되지 않습니다.

Stephan202의 캡슐화 및 여러 이벤트 리스너라는 두 가지 방법을 사용하여 성공적으로 작동했습니다. 3 개의 검색 탭이 있는데 입력 텍스트 ID를 배열로 정의하십시오.

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

searchtab1의 내용이 변경되면 searchtab2 및 searchtab3을 업데이트하고 싶습니다. 캡슐화를 위해 이런 식으로 했습니까?

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());
            });
        }
    }
}

나는 두 가지 방법을 모두 좋아하지만 프로그래머는 캡슐화를 선택했지만 여러 이벤트 리스너도 작동했습니다. Chrome을 사용하여 테스트했습니다.

하나의 핸들러가 다음에 발생하도록 보장하는 해결 방법이 있습니다. 두 번째 핸들러를 포함하는 요소에 첨부하고 이벤트가 버블 링되도록하십시오. 컨테이너에 연결된 핸들러에서 event.target을보고 관심이있는 경우 무언가를 수행 할 수 있습니다.

조잡하지만 어쩌면 효과가 있습니다.

jquery는 여러 이벤트 핸들러를 허용하므로 두 핸들러를 모두 실행합니다. 샘플 코드를 만들었습니다. 당신은 그것을 시도 할 수 있습니다

데모