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는 이벤트를 캡처하고 바인딩된 이벤트 핸들러를 실행합니다.

간단히 말하면, 클릭 이벤트 핸들러 함수를 페이지의 모든 64e5601d0a941f4972a2954192bdae18 태그에 바인딩하려면 클릭 이벤트 핸들러 함수를 각 P 태그에 별도로 직접 바인딩하면 됩니다. 예:

// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);

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

// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(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代码：

<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>

我们为dc6dce4a544fdca2df29d5ac0ea9906b中的所有e388a4556c0f65e1904146cc1a846bee元素绑定点击事件：

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

如果要绑定所有的e388a4556c0f65e1904146cc1a846bee元素，你可以编写如下jQuery代码：

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

此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：

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

此外，即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(event){
    alert( $(this).text() );
});
// 后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append(&#39;<p id="n6">上述绑定的click事件对此元素也生效!</p>&#39;);

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!