jQuery 이벤트 바인딩 및 위임 example

이 기사의 예에서는 jQuery 이벤트 바인딩 및 위임에 대해 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 방법은 다음과 같습니다.

JQuery 이벤트 바인딩 및 위임은 on() , Bind() , live() , Delegate() 및 one() 등 다양한 메서드를 사용하여 구현할 수 있습니다.

때때로 우리는 다음과 같은 이벤트를 묶을 수도 있습니다:

코드 복사 코드는 다음과 같습니다.

$("#div1").click(function() { 

Alert("클릭 후 트리거");
});

위 이벤트 바인딩을 다양한 방법으로 구현할 수 있습니다.

1.온()

코드 복사 코드는 다음과 같습니다.

//데이터 매개변수 없음

$("p").on("클릭", function(){ 

경고( $(this).text() );
}) 

//데이터 매개변수가 있습니다 

함수 myHandler(이벤트) { 

경고(event.data.foo) 

} 

$("p").on("click", {foo: "bar"}, myHandler)

on()에 해당하는 것은 이벤트 바인딩을 제거하는 데 사용되는 off()입니다.

코드 복사 코드는 다음과 같습니다.var foo = function() {

// 일종의 이벤트를 처리하는 코드

};
// ... 이제 단락을 클릭하면 foo가 호출됩니다 ... 

$("body").on("클릭", "p", foo) 

// ... foo는 더 이상 호출되지 않습니다. 

$("body").off("클릭", "p", foo);

off(): on()으로 바인딩을 제거합니다

one(): 한 번만 바인딩합니다.

2. 바인드()

매개변수: (유형,[데이터],함수(eventObject))

유형: 공백으로 구분된 여러 이벤트와 함께 하나 이상의 이벤트 유형을 포함하는 문자열입니다. 예를 들어 '클릭', '제출' 또는 맞춤 이벤트 이름 등이 있습니다.

data: event.data 속성 값
으로 이벤트 객체에 전달되는 추가 데이터 객체
fn: 일치하는 각 요소의 이벤트에 바인딩된 핸들러 함수

(유형,[데이터],거짓)
유형: 공백으로 구분된 여러 이벤트와 함께 하나 이상의 이벤트 유형을 포함하는 문자열입니다. 예를 들어 '클릭', '제출' 또는 맞춤 이벤트 이름 등이 있습니다.
data: event.data 속성 값
으로 이벤트 객체에 전달되는 추가 데이터 객체
false: 세 번째 매개변수를 false로 설정하면 기본 작업이 비활성화됩니다.

동시에 여러 이벤트 유형 바인딩:

코드 복사 코드는 다음과 같습니다.$('#foo').bind('mouseenter mouseleave', 함수() { $(this).toggleClass('입력됨')

});

여러 이벤트 유형/핸들러를 동시에 바인딩:

코드 복사 코드는 다음과 같습니다.$("button").bind({ 클릭:function(){$("p").slideToggle();},

mouseover:function(){$("body").css("Background-color","red");},

mouseout:function(){$("body").css("배경색","#FFFFFF");} 

});

이벤트 처리 전에 몇 가지 추가 데이터를 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.함수 핸들러(이벤트) { 경고(event.data.foo)

}

$("p").bind("click", {foo: "bar"}, handler)

기본 동작을 취소하고 false를 반환하여 이벤트가 버블링되는 것을 방지합니다.

코드 복사 코드는 다음과 같습니다.$("form").bind("submit", function( ) { false 반환 })

바인드 문제

클릭 이벤트가 바인딩된 테이블에 10개의 열과 500개의 행이 있는 경우 5000개의 셀을 찾아 순회하면 스크립트 실행 속도가 크게 느려지고 5000개의 td 요소와 해당 이벤트 핸들러를 저장하면 많은 메모리를 생성합니다(모든 사람이 물리적으로 문 앞에 서서 배달을 기다리게 하는 것과 유사함).

이전 예를 기반으로 간단한 사진 앨범 애플리케이션을 구현하려는 경우 각 페이지에는 50장의 사진(50셀)의 썸네일만 표시되고 사용자가 "페이지 x"(또는 "다음 페이지") 링크를 클릭하면 Ajax를 통해 서버에서 또 다른 50장의 사진을 동적으로 로드합니다. 이 경우에는 .bind() 메소드를 사용한 50개 셀에 대한 바인딩 이벤트가 다시 허용되는 것으로 보입니다.

그렇지 않습니다. .bind() 메소드를 사용하면 첫 번째 페이지의 50개 셀에만 클릭 이벤트가 바인딩됩니다. 동적으로 로드되는 후속 페이지의 셀에는 이 클릭 이벤트가 없습니다. 즉, .bind()는 호출 시 이미 존재하는 요소에만 이벤트를 바인딩할 수 있으며 향후 추가될 요소에는 이벤트를 바인딩할 수 없습니다(신입 직원이 빠른 배송을 받을 수 없는 것과 유사).

이벤트 위임은 위의 두 가지 문제를 해결할 수 있습니다. 코드에 따라 .bind() 메서드 대신 jQuery 1.3에 새로 추가된 .live() 메서드를 사용하세요.

코드 복사 코드는 다음과 같습니다.

$("#info_table td").live("click", function() {/*자세한 정보 표시*/});

여기서 .live() 메소드는 클릭 이벤트를 $(document) 객체에 바인딩합니다(그러나 이는 코드에서 반영될 수 없습니다. 이는 .live() 메소드가 비판을 받는 중요한 이유이기도 합니다. 이에 대해 논의하겠습니다. 나중에 자세히 설명합니다.) $(document)를 한 번만 바인딩하면(5000번은 물론이고 50번도 아님) 동적으로 로드된 후속 사진 셀의 클릭 이벤트를 처리할 수 있습니다. 이벤트를 수신하면 $(document) 객체는 이벤트 유형과 이벤트 대상을 확인합니다. 클릭 이벤트이고 이벤트 대상이 td이면 이에 위임된 핸들러가 실행됩니다.

unbind(): 바인드에 의해 수행된 바인딩을 제거합니다.

3. 라이브()

지금까지는 모든 것이 완벽해 보입니다. 불행하게도 그렇지 않습니다. .live() 메소드는 완벽하지 않기 때문에 다음과 같은 주요 단점이 있습니다.
$() 함수는 현재 페이지에서 모든 td 요소를 찾아 jQuery 객체를 생성합니다. 그러나 이 td 요소 컬렉션은 이벤트 대상을 확인할 때 사용되지 않으며 대신 선택기 표현식을 사용하여 event.target 또는 해당 상위 항목과 비교합니다. 요소이므로 이 jQuery 객체를 생성하면 불필요한 오버헤드가 발생합니다.
기본적으로 이벤트는 $(document) 요소에 바인딩됩니다. DOM 중첩 구조가 매우 깊은 경우 많은 수의 상위 요소를 통해 버블링되는 이벤트는 성능 저하를 초래합니다.
직접 선택한 요소 뒤에만 배치할 수 있고 연속적인 DOM 순회 방식 뒤에는 사용할 수 없습니다. 즉, $("#info_table td").live... 는 사용할 수 있지만 $("#info_table") .find("td" ).live...아니요;
td 요소를 모아서 jQuery 객체를 생성하는데, 실제 작업은 $(document) 객체인데, 헷갈립니다.
해결책
불필요한 jQuery 개체 생성을 방지하려면 $(document).ready() 메서드 외부에서 .live()를 호출하는 "조기 위임"이라는 해킹을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

(function($){ 

$("#info_table td").live("click",function(){/*자세한 정보 표시*/}) 

})(jQuery);

여기서 (function($){...})(jQuery)는 "즉시 실행되는 익명 함수"로, 이름 충돌을 방지하기 위해 클로저를 형성합니다. 익명 함수 내에서 $parameter는 jQuery 객체를 참조합니다. 이 익명 함수는 DOM이 실행되기 전에 준비될 때까지 기다리지 않습니다. 이 해킹을 사용할 때 스크립트는 페이지의 헤드 요소에서 연결 및/또는 실행되어야 합니다. 이 타이밍을 선택한 이유는 이 시점에서 문서 요소를 사용할 수 있고 전체 DOM이 생성되지 않기 때문입니다. 스크립트가 닫는 body 태그 앞에 배치되면 DOM이 완전히 생성되기 때문에 의미가 없습니다. 그 시간에 사용 가능합니다.

이벤트 버블링으로 인한 성능 손실을 방지하기 위해 jQuery는 1.4부터 .live() 메서드를 사용할 때 컨텍스트 매개 변수 사용을 지원합니다.

코드 복사 코드는 다음과 같습니다.

$("td",$("#info_table")[0 ]).live("click",function(){/*자세한 정보 표시*/});

이런 방식으로 "수탁자"는 기본 $(document)에서 $("#info_table")[0]으로 변경되어 버블링 여행을 저장합니다. 그러나 .live()와 함께 사용되는 컨텍스트 매개변수는 별도의 DOM 요소여야 하므로 여기서는 배열 인덱스 연산자를 사용하여 얻은 $("#info_table")[0]을 사용하여 컨텍스트 객체를 지정합니다.

4. 대리자()

앞서 언급했듯이 단일 .bind() 메서드의 한계를 극복하고 이벤트 위임을 구현하기 위해 jQuery 1.3에서는 .live() 메서드를 도입했습니다. 나중에 너무 긴 "이벤트 전파 체인" 문제를 해결하기 위해 jQuery 1.4에서는 .live() 메서드에 대한 컨텍스트 개체 지정을 지원했습니다. 불필요한 요소 컬렉션 생성 문제를 해결하기 위해 jQuery 1.4.2에서는 단순히 새로운 method.delegate()를 도입했습니다.

.delegate()를 사용하면 이전 예제를 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("#info_table").delegate("td"," click", function(){/*자세한 정보 표시*/});

.delegate()를 사용하면 다음과 같은 장점이 있습니다(또는 .live() 메서드의 다음 문제를 해결합니다).
추가 요소 수집, 단축된 이벤트 전파 경로 및 명확한 의미 체계 없이 대상 요소 선택기("td"), 이벤트("클릭") 및 처리기를 "dragee" $("#info_table")에 직접 바인딩합니다. >

연속 DOM 탐색 방식 이후 호출을 지원합니다. 즉, $("table").find("#info").delegate...를 지원하여 정밀한 제어를 지원합니다.

.delegate() 메서드가 비교적 완벽한 솔루션임을 알 수 있습니다. 그러나 DOM 구조가 간단한 경우에는 .live()도 사용할 수 있습니다.

팁: 이벤트 위임을 사용할 때 대상 요소에 등록된 다른 이벤트 핸들러가 이벤트 전파를 방지하기 위해 .stopPropagation()을 사용하면 이벤트 위임이 무효화됩니다.

undelegate(): 위임 바인딩을 제거합니다

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.