jQuery.bind() 함수 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery.bind() 함수 사용법에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-06-25 10:56:59

원래의

1358명이 탐색했습니다.

bind() 함수는 이벤트 처리 함수를 일치하는 각 요소에 대한 하나 이상의 이벤트에 바인딩하는 데 사용됩니다.

또한 일부 추가 필수 데이터를 이벤트 핸들러 함수에 전달할 수도 있습니다.

bind()가 실행되면 이벤트 핸들러 함수가 일치하는 각 요소에 바인딩됩니다. 따라서 바인딩()을 사용하여 클릭 이벤트를 모든 버튼 요소에 바인딩합니다. 해당 시점에 문서에 존재하는 각 버튼 요소에 클릭 이벤트를 바인딩합니다. 나중에 문서에 새 버튼 요소를 추가하면 바인딩된 이벤트가 해당 요소에 적용되지 않습니다. 나중에 새로 추가된 요소에도 바인딩 이벤트가 적용되도록 하려면 on(), Delegate(), live() 등의 이벤트 함수를 사용하세요(이전 이벤트 함수를 먼저 사용해 보세요).

또한 여러 이벤트 핸들러를 동일한 요소 및 이벤트 유형에 바인딩할 수 있습니다. 이벤트가 트리거되면 jQuery는 바인딩된 순서대로 바인딩된 이벤트 처리 함수를 실행합니다.

bind()를 통해 바인딩된 이벤트를 삭제하려면 unbind() 함수를 사용하세요.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

bind() 함수는 주로 다음과 같은 두 가지 형태의 사용법을 가지고 있습니다:

Usage 1:

jQueryObject.bind( events [, data ], handler )

로그인 후 복사

Usage 2: jQuery 1.4.3은 이 사용법을 새롭게 지원합니다.

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

로그인 후 복사

사용법 3: jQuery 1.4에서는 이 사용 방법을 새로 지원합니다.

jQueryObject.bind( eventsMap )

로그인 후 복사

Parameters

매개변수 설명

events 문자열 유형 "click", "focus click", "keydown.myPlugin"과 같은 선택적인 namespace 및 공백으로 구분된 하나 이상의 이벤트 유형입니다.

data 선택사항/모든 유형 이벤트가 트리거되면 모든 데이터는 event.data를 통해 이벤트 처리 함수로 전달되어야 합니다.

핸들러 함수 유형에 의해 지정된 이벤트 처리 함수입니다.

isDefaultBubble 선택적/부울 유형은 이벤트가 트리거될 때 요소의 기본 동작 및 이벤트 버블링을 허용할지 여부를 지정합니다. 기본값은 true입니다.

eventsMap 객체 유형은 Object 객체입니다. 각 속성은 이벤트 유형 및 선택적 네임스페이스(매개변수 이벤트)에 해당하며 속성 값은 바인딩된 이벤트 처리 함수(매개변수 핸들러)에 해당합니다.

매개변수 이벤트의 선택적 네임스페이스(1.4.3+에서만 지원)는 아래 샘플 코드를 참조하세요.

매개변수 핸들러의 이 항목은 현재 DOM 요소를 가리킵니다. 바인딩()은 또한 핸들러에 매개변수(현재 이벤트를 나타내는 Event 객체)를 전달합니다.

매개변수 핸들러의 반환 값은 DOM 네이티브 이벤트 처리 함수의 반환 값과 동일한 효과를 갖습니다. 예를 들어 제출(양식 제출) 이벤트의 이벤트 핸들러 기능은 false를 반환하므로 양식이 제출되지 않을 수 있습니다.

isDefaultBubble 매개변수는 요소의 기본 동작과 이벤트 버블링이 허용되는지 여부를 나타내는 데 사용됩니다. 값이 false이면 요소의 기본 동작(예: 클릭 이벤트를 트리거하는 링크의 기본 점프 동작, 제출 이벤트를 트리거하는 양식의 기본 제출 동작) 및 이벤트 버블링 전달을 방지합니다.

반환 값

bind()함수의 반환 값은 jQuery 유형이며 현재 jQuery 개체 자체를 반환합니다.

예제 및 설명

클릭 이벤트("클릭")를 예로 들어 보겠습니다. 다음은 jQuery에서 이벤트 함수의 일반적인 사용법입니다(일부 함수에는 여기에 나열되지 않은 다른 형태의 사용법도 있습니다).

다음 초기 HTML 코드를 참조하세요.

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"委托代理"的形式触发事件。
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );
// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );
// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );
// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

로그인 후 복사

클릭 이벤트를

의 모든

요소에 바인딩합니다.

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

로그인 후 복사

또한 여러 이벤트를 동시에 바인딩하고 이벤트 핸들러를 제공할 수도 있습니다. 추가 데이터를 전달하기 위해서는 이벤트 처리 기능을 위해 jQuery에서 전달한 이벤트 매개변수(이벤트 이벤트 객체)를 통해 처리하면 됩니다.

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

로그인 후 복사

또한, 조건에 맞는 요소가 바인딩() 이후에 새로 추가되면 함수가 실행되면 바인딩 특정 이벤트가 적용되지 않습니다. 초기 HTML 코드를 예로 들면 다음 jQuery 코드를 작성할 수 있습니다.

var obj = { id: 5, name: "王五" };
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj
// 附加数据可以是任意类型
$("#n5").bind("mouseenter mouseleave", obj, function(event){
    var $me = $(this);
    var obj = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好，" + obj.name + "!");
    }else if(event.type == "mouseleave" ){
        $me.html( "再见，" + obj.name + "!");      
    }           
} );

로그인 후 복사

Parameter 이벤트는 이벤트 유형에 추가 네임스페이스 추가도 지원합니다. 동일한 유형의 여러 이벤트 핸들러를 동일한 요소에 바인딩하는 경우. 네임스페이스를 사용하면 이벤트 또는

제거 이벤트가 트리거될 때 트리거 또는 제거 범위를 제한할 수 있습니다. 아아아아

위 내용은 jQuery.bind() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!