동일한 요소에 대해 두 개의 이벤트 핸들러를 동일한 이벤트에 바인딩하면 어떻게됩니까?
예를 들면 다음과 같습니다.
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을보고 관심이있는 경우 무언가를 수행 할 수 있습니다.
조잡하지만 어쩌면 효과가 있습니다.
