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

jQuery.on() 함수 사용 예에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-06-25 10:36:30

원래의

1104명이 탐색했습니다.

on() 함수는 이벤트 처리 함수를 지정된 요소의 하나 이상의 이벤트에 바인딩하는 데 사용됩니다.

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

jQuery 1.7부터 on() 함수는 이벤트 핸들러 바인딩에 필요한 모든 함수를 제공하며, 이전 이벤트 함수(bind(), Delegate(), live() 등)를 일률적으로 대체하는 데 사용됩니다.

on()은 대상 요소에서 직접 이벤트 바인딩을 지원하고 대상 요소의 상위 요소에 대한 위임 바인딩도 지원합니다. 이벤트 위임 바인딩 모드에서는 on() 함수 실행 후 새로 추가된 요소라도 조건만 만족하면 바인딩된 이벤트 처리 기능이 유효합니다.

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

on()을 통해 바인딩된 이벤트를 제거하려면 off() 함수를 사용하세요. 이벤트를 첨부하고, 한 번만 실행한 후 삭제하고 싶다면 one() 함수를 사용하세요.

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

Syntax

이 기능은 jQuery 1.7에서 추가되었습니다. 주로 다음과 같은 두 가지 사용 형태가 있습니다.

Usage 1:

jQueryObject.on( events [, selector ] [, data ], handler )

Usage 2:

jQueryObject.on( eventsMap [, selector ] [ , data ] )

Parameter

매개변수 설명

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

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

selector 옵션/문자열 유형 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다. 이 매개변수가 null이거나 생략되면 현재 요소 자체가 이벤트에 바인딩된다는 의미입니다(이벤트 스트림이 현재 요소에 도달할 수 있는 한 실제 트리거러도 하위 요소일 수 있음).

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

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

매개변수 이벤트의 선택적 네임스페이스는 아래 샘플 코드를 참조하세요.

매개변수 선택기와 관련하여 간단히 이해하면 매개변수가 null이거나 생략되면 이벤트가 현재 일치하는 요소에 바인딩되고, 그렇지 않으면 이벤트가 하위 항목 중 선택기와 일치하는 요소에 바인딩됩니다. 현재 일치하는 요소의 요소입니다.

매개변수 핸들러의 이는 현재 일치하는 요소의 하위 요소 중에서 이벤트를 트리거하는 DOM 요소를 가리킵니다. 선택기 매개변수가 null과 같거나 생략된 경우 이는 현재 일치하는 요소(즉, 요소)를 가리킵니다.

on()은 핸들러에 현재 이벤트를 나타내는 Event 객체라는 매개변수도 전달합니다.

매개변수 핸들러의 반환 값은 DOM 네이티브 이벤트 처리 함수의 반환 값과 동일한 효과를 갖습니다. 예를 들어 "submit"(양식 제출) 이벤트의 이벤트 핸들러는 양식이 제출되지 않도록 false를 반환합니다.

이벤트 처리 함수 핸들러가 false 값만 반환하는 경우 핸들러를 false로 직접 설정할 수 있습니다.

반환 값

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

중요 사항:

선택기 매개변수가 전달되면 on() 함수는 이벤트 핸들러를 현재 jQuery 객체와 일치하는 요소에 바인딩하지 않고 선택기 이벤트 핸들러와 일치하는 하위 요소의 요소에 바인딩합니다. 기능. on() 함수는 이벤트를 이러한 하위 요소에 하나씩 직접 바인딩하지 않지만 현재 jQuery 개체의 일치하는 요소에 처리를 위임합니다. DOM 레벨 2 이벤트 흐름 메커니즘으로 인해 하위 요소 선택기가 이벤트를 트리거하면 해당 이벤트는 이벤트 버블링의 모든 상위 요소에 전달됩니다. 이벤트 흐름이 현재 일치하는 요소에 전달되면 jQuery는 어느 요소를 결정합니다. 이벤트가 트리거될 때 요소가 선택기와 일치하면 jQuery는 이벤트를 캡처하고 바인딩된 이벤트 핸들러를 실행합니다.

간단히 말하면, 클릭 이벤트 핸들러 함수를 페이지의 모든

태그에 바인딩하려면 클릭 이벤트 핸들러 함수를 각 P 태그에 별도로 직접 바인딩하면 됩니다. 예:

// 클릭 이벤트 핸들러 함수 핸들러를 모든 P 요소에 개별적으로 바인딩합니다

$("p").on("click", handler);

또한 이러한 P 태그의 공통 조상을 바인딩할 수도 있습니다. 이벤트 위임 메커니즘은 요소에 바인딩되며 DOM의 이벤트 버블링 메커니즘은 위임 처리를 통합하는 데 사용됩니다. 요소의 클릭 이벤트를 트리거하면 JS는 요소와 해당 "부모" 요소, "할아버지" 요소에... 이러한 요소에 바인딩된 클릭 이벤트 핸들러가 있는 경우 실행될 때까지 알립니다. 순서.

// 클릭 이벤트 처리 함수 핸들러를 body 요소에 바인딩합니다. 클릭 이벤트가 하위 P 요소에 의해 트리거되면 핸들러

$(document.body).on("click", "p ", 핸들러);

여기의 예에서 이벤트 위임 메커니즘은 클릭 이벤트 핸들러를 각 P 요소에 직접 바인딩하지 않고 공개 상위 요소(이 예에서는 document.body) 중 하나에 위임하는 것입니다. 클릭 이벤트 트리거 알림이 수신되고 클릭 이벤트가 P 요소 중 하나에 의해 트리거되면 상위 요소에서 대리자가 바인딩된 이벤트 핸들러를 실행합니다.

참고: "focus" 및 "blur"와 같은 일부 이벤트는 버블링을 지원하지 않으며 이벤트 위임 메커니즘을 사용할 수 없습니다. 그러나 일반적으로 버블링을 지원하는 해당 이벤트도 있습니다. 예를 들어, "focusin"은 "focus"에 해당하고 "focusout"은 "blur"에 해당합니다. 또한 event.stopPropagation() 메서드를 사용하여 현재 트리거된 이벤트의 버블링을 중지할 수도 있습니다.

예제 및 설명

클릭 이벤트("클릭")를 예로 들어 보겠습니다. 다음은 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").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

로그인 후 복사

또한 여러 이벤트를 동시에 바인딩하고 일부 추가 데이터를 이벤트 처리 함수에 전달할 수도 있습니다. 이벤트에 대해 jQuery에서 전달한 매개변수 이벤트(이벤트 이벤트 개체)를 통해 이를 처리할 수 있습니다. 처리 기능:

//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
//n2、n3、n5均可触发该事件
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

로그인 후 복사

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

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

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