jQuery.trigger() 함수 사용법 튜토리얼

trigger() 함수는 일치하는 각 요소에서 지정된 유형의 이벤트를 트리거하는 데 사용됩니다.

또한 이벤트가 트리거될 때 Event Handling 함수에 추가 매개변수를 전달할 수도 있습니다.

이 함수를 사용하면 요소에 바인딩된 이벤트 처리 함수의 실행을 수동으로 트리거할 수 있으며 요소의 기본 동작 실행도 트리거됩니다.

양식 요소 ff9c23ada1bcecdd1a0fb5d5a0f18437를 예로 들면, Trigger("submit")를 사용하면 양식에 바인딩된 제출 이벤트를 트리거할 수 있으며 양식 제출 이벤트의 기본 동작인 양식 제출 작업도 실행할 수 있습니다.

네티즌 @Feiyang의 피드백에 따르면 링크 태그 3499910bf9dac5ae3c52d5ede7383485의 트리거("클릭")는 특수한 경우이며 링크 클릭 이벤트의 기본 동작인 해당 링크로 이동하는 작업을 트리거하지 않습니다. 관련 세부정보를 보려면 여기를 클릭하세요.

jQuery 1.3부터 ​​Trigger() 함수에 의해 트리거되는 이벤트는 버블링되어 DOM 트리로 전달될 수 있는 이벤트 버블링도 지원합니다.

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

Syntax

trigger() 함수는 주로 다음 두 가지 형태의 사용법을 가집니다:

Usage 1:

jQueryObject.trigger(events [, extraArguments])

일치하는 각 요소 이벤트에서 지정된 유형(이벤트)을 트리거합니다. 이벤트 처리 함수에 추가 매개변수(extraArguments)를 전달할 수 있습니다.

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

jQueryObject.trigger( eventObject [, extraArguments ] )

는 지정된 이벤트 처리 함수가 전달한 이벤트 객체(eventObject)로, 해당 이벤트 처리 함수의 실행을 트리거하는 데 사용되며, 추가 매개변수를 전달할 수 있습니다. 이벤트 처리 함수( extraArguments).

Parameters

매개변수 설명

events 문자열 유형은 이벤트 유형과 선택적인 namespace(예: "click", "focus", "keydown.myPlugin")을 지정합니다.

extraArguments option/Object 유형은 이벤트 처리 함수에 의해 전달된 추가 매개변수입니다. 여러 매개변수를 전달하려면 배열로 전달하세요.

eventObject 개체 유형은 개체에 전달된 이벤트 처리 기능을 트리거하는 데 사용되는 이벤트 개체입니다.

trigger() 함수는 실행을 트리거하는 이벤트 처리 함수(현재 이벤트를 나타내는 Event 개체)에 기본 매개변수를 전달합니다.

extraArguments 매개변수는 이벤트 처리 함수에 더 많은 추가 매개변수를 전달하는 데 사용됩니다. extraArguments가 배열 형식인 경우 각 요소는 함수에 대한 인수 역할을 합니다.

반환 값

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

예제 및 설명

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

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

먼저 위의 버튼과 3499910bf9dac5ae3c52d5ede7383485 요소에 이벤트를 바인딩한 다음, Trigger() 함수를 사용하여 이벤트를 직접 트리거합니다. 해당 코드는 다음과 같습니다:

var $log = $("#log");
function handler( event, arg1, arg2 ){
    var html = &#39;<br>触发元素#&#39; + this.id + &#39;的[&#39; + event.type +&#39;]事件，额外的函数参数为:&#39; + arg1 + &#39;, &#39; + arg2;
    $log.append( html );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );
// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三"， arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/
$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/
trigger()函数还可以根据传入事件处理函数的Event对象，来触发对应的事件。
var $btn1 = $("#btn1");
// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click", function(event){
    alert("click1");    
});
// 为btn1元素的click事件绑定事件处理函数
// 如果传入了一个有效的额外参数，则再次触发click
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});
// $btn1.trigger( "click" ); // 调用一次click1、调用一次click2
$btn1.trigger( "click", true ); // 调用两次click1、调用两次click2

또한, Trigger() 함수는 지정된 네임스페이스를 포함하는 이벤트만 트리거할 수도 있습니다(네임스페이스는 1.4.3+에서만 지원됩니다).

아아아아

위 내용은 jQuery.trigger() 함수 사용법 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!