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

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", handler);

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

示例&说明

以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：

// 这里的选择器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 );

请参考下面这段初始HTML代码：

   

CodePlayer

   

专注于编程开发技术分享

    http://www.365mini.com

Google

의 모든

요소에 대해 클릭 이벤트를 바인딩합니다.

// div의 모든 p 요소에 대해 클릭을 바인딩합니다. 이벤트 핸들러

// n2와 n3만이 이 이벤트를 트리거할 수 있습니다

$("div").on("click", "p", function(){

// 여기서는 트리거를 가리킵니다. 이벤트의 p 요소(Element)

Alert( $(this).text() );

});

코드 실행(실행하려면 데모 페이지에 다른 코드를 복사하세요)

원하는 경우 모든

요소를 바인딩하려면 다음 jQuery 코드를 작성할 수 있습니다.

//모든 p 요소에 대한 클릭 이벤트 핸들러 바인딩(참고: 여기에서는 선택기 매개변수가 생략됨)

//n2, n3 및 n5가 트리거될 수 있음 이 이벤트

$("p").on("click", function(event){

// 이것은 클릭 이벤트를 트리거한 p 요소(요소)를 가리킵니다.

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

});

또한 여러 이벤트를 동시에 바인딩하고 일부 추가 데이터를 이벤트 처리 함수에 전달할 수도 있습니다. 이벤트 처리 기능을 위한 jQuery:

var data = { id: 5, name: "Zhang San" };

// mouseenter mouseleave 두 이벤트를 n5에 바인딩하고 추가 데이터 data

// 추가 데이터는 어떤 유형이든 가능합니다.

$("body").on("mouseenter mouseleave", "#n5", data, function(event){

var $me = $(this);

var options = event.data ; // 전달된 추가 데이터입니다

if( event.type == "mouseenter"){

$me.html( "Hello," + options.name + "!"); > 조건을 충족하는 요소는 다음 이후에 새로운 요소입니다. on() 함수가 실행되고 바인딩 이벤트가 여전히 유효합니다. 초기 HTML 코드를 예로 들면 다음 jQuery 코드를 작성할 수 있습니다.

// 클릭 이벤트 핸들러를 div의 모든 p 요소에 바인딩

// n2 및 n3만 이 이벤트를 트리거할 수 있습니다

$("div ").on("click", "p", function(event){

Alert( $(this).text() );

});

// 나중에 추가된 n6도 위를 트리거할 수 있습니다. 클릭 이벤트입니다. div의 p 요소이기도 하기 때문입니다

$("#n1").append('

위에 바인딩된 클릭 이벤트도 이 요소에 적용됩니다!< /p> ');

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

제거 이벤트

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

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.on( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", clickHandler );
var $n2 = $("#n2");
// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")
// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")
// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" ); // 移除A

on()

함수

eventsMap의 매개변수는 "속성-값" 형태로 여러 개의 "이벤트 유형 처리 함수"를 지정할 수 있는 객체입니다. 해당 샘플 코드는 다음과 같습니다.

var data = { id: 5, name: "张三" };
var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },
    
    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.