Query_jquery에서 click(), 바인딩(), live() 및 Delegate()의 차이점

click(), bin(), live()는 모두 이벤트를 실행할 때 사용하는 메소드인데, 앞서 언급한 메소드와 약간의 차이점이 있습니다.

1. click() 메소드는 우리가 자주 사용하는 클릭 이벤트 메소드입니다:

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

$("a").click(function(){
Alert("hello");
}) ;

를 클릭하면 hello가 출력됩니다.

2. click() 메소드는 바인딩() 메소드의 간단한 메소드입니다. 바인딩()에서는 포커스, 마우스오버, 크기 조정 등의 모든 jQuery JavaScript 이벤트 객체를 유형 매개변수로 전달할 수 있습니다. jQuery 문서의 예를 직접 살펴보겠습니다.

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

var message = "left";
$("a").bind("click", function() {
Alert(message);
return false;
} );var message = "right";
$("a").bind("contextmenu", function() {
Alert(message);
return false;
});

위 코드에서 를 왼쪽으로 클릭하든 오른쪽으로 클릭하든 출력은 항상 "오른쪽"입니다. 이 문제를 해결하기 위해 다음과 같이 메시지를 데이터 매개 변수로 바인딩() 메서드에 전달할 수 있습니다.

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

var message = "left";
$("a").bind("click", { msg: message }, function(e) {
경고( e.data.msg);
return false;
});var
message = "right";
$("a").bind("contextmenu", { msg: message } , function(e) {
Alert(e.data.msg);
return false;
});

이렇게 하면 <를 마우스 왼쪽 버튼으로 클릭할 수 있습니다. ;a> 를 마우스 오른쪽 버튼으로 클릭하면 "left"가 출력되고, 를 마우스 오른쪽 버튼으로 클릭하면 "right"가 출력됩니다.

일반적인 상황에서는 click() 메서드를 사용하면 된다는 것을 알 수 있습니다. 위의 상황을 처리해야 하는 경우에는 바인딩() 메서드를 사용해야 합니다.

3.live()는 요소가 나중에 추가되더라도 일치하는 모든 요소에 이벤트 핸들러를 연결합니다. 은 다음과 같습니다.

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

$("div .live").bind("click", function() {
Alert("success");
});

이때, 언제 라이브 클래스가 있는 div를 클릭하면 "성공"이 출력됩니다. 이때 새로운 요소가 추가되면

코드를 복사합니다 코드는 다음과 같습니다. 🎜>

$("

live

").appendTo("body");

이때 위의 메소드를 사용할 경우 클래스가 live인 a 태그를 클릭하면 실행되지 않습니다. 그 이유는 이 요소는 바인딩() 호출 이후에 추가되는데, live() 메소드를 사용하면 나중에 추가된 요소도 다음과 같이 해당 이벤트를 실행할 수 있기 때문입니다.

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

$("div.live").live("click", function() {
Alert(" Success ");
});

이렇게 해서 클래스 라이브에서 a 태그를 클릭했을 때 나중에 a 태그를 추가하면 평소처럼 "success"가 출력될 수 있습니다. 그 이유에 대해서는 여기서는 자세한 설명을 하지 않겠습니다. 주로 여러 방법의 차이점을 비교합니다.

마지막으로 대리자() 메서드를 살펴보세요. 저는 아직까지 이 메서드를 사용하지 않았습니다. 1.4.2에서 사용할 수 있습니다.
live() 메서드의 한 가지 단점은 체인 쓰기를 지원하지 않는다는 것입니다.

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

$("#test").children("a").live("mouseover", function() {
Alert("hello" );
});


위의 작성 방법은 출력되지 않습니다.

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

$("#test").delegate("a", "mouseover", function() {
Alert("hello");
} );

이렇게 하면 우리가 원하는 결과가 정상적으로 출력될 수 있습니다. 이 문서에서는 click(), bin(), live() 및 Delegate() 메서드를 요약합니다. 자세한 설명은 제공하지 않지만 특정 사용에 있어 모든 사람에게 도움이 되기를 바랍니다.