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

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

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

one() 함수를 통해 바인딩된 이벤트 처리 함수는 모두 일회성이며 이벤트 처리 함수는 이벤트가 처음 트리거될 때만 실행됩니다. 트리거된 후 jQuery는 현재 이벤트 바인딩을 제거합니다.

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

one()을 통해 바인딩된 이벤트를 제거하려면 unbind() 또는 off() 함수를 사용하세요.

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

Syntax

이 함수는 jQuery 1.1의 새로운 기능입니다. one() 함수는 주로 다음 두 가지 형태로 사용됩니다.

사용법 1:

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

이벤트 처리 함수를 일치하는 각 요소의 지정된 이벤트에 바인딩합니다.

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

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

일치하는 각 요소의 이벤트 핸들러 함수를 지정된 선택기(선택기)와 일치하는 모든 하위 요소에 대해 지정된 이벤트에 바인딩합니다.

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

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

이전 두 사용법의 변형입니다. eventsMap은 객체이고, 각 속성은 매개변수 이벤트에 해당하며, 속성 값은 매개변수 핸들러에 해당합니다.

Parameters

매개변수 설명

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

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

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

selector 문자열 유형은 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다.

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

jQuery 1.7부터 one() 함수의 사용법은 one() 함수가 일회성 이벤트 처리 함수에 바인딩된다는 점을 제외하면 on() 함수와 완전히 동일합니다.

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

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

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

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

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

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

현재 요소에 선택기와 일치하는 여러 하위 요소가 있는 경우 하위 요소가 이벤트 처리 기능의 실행을 트리거하는 한 현재 요소의 이벤트 바인딩은 제거되고 현재 요소 내의 다른 하위 요소는 충족됩니다. 조건은 실행을 다시 트리거할 수 없습니다.

반환 값

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

예제 및 설명

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

<input id="btn" type="button" value="点击" />
<div id="n1">
    <p id="n2">段落文本内容1</p>
    <p id="n3">段落文本内容2</p>
    <span id="n4">隐藏关卡</span>
</div>
<div id="n5">
    <p id="n6">段落文本内容3</p>
    <p id="n7">段落文本内容4</p>
</div>
<p id="n8">专注于编程开发技术分享</p>

위 HTML의 버튼에 일회성 클릭 이벤트를 바인딩합니다.

// 只有第一次点击时，执行该事件处理函数
// 执行后one()会立即移除绑定的事件处理函数
$("#btn").one("click", function(){
    alert("只弹出一次提示框!");     
});

또한 여러 이벤트를 동시에 바인딩할 수도 있습니다. 이벤트 처리 함수에 추가 데이터를 전달하려면 이벤트 처리 함수를 위해 jQuery에서 전달한 매개변수 event(이벤트 이벤트 개체)를 통해 이를 처리할 수 있습니다.

$("#n4").one("mouseenter mouseleave", obj, function(event){
    var obj = event.data;
    var $me = $(this);
    if(event.type == "mouseenter"){
        $me.html( obj.name + '，你碰到了隐藏关卡，获得' + obj.hidden + "金币!" );     
    }else{
        $me.html( '你已通过该关卡!' );     
    }
        
});

또한 조건을 충족하는 요소가 있는 경우 one() 함수가 실행된 후입니다. 새로 추가된 함수의 경우 바인딩 이벤트가 계속 적용됩니다. 초기 HTML 코드를 예로 들면 다음 jQuery 코드를 작성할 수 있습니다.

참고: 다음 jQuery 코드는 클릭 이벤트를 n1 요소의 모든 하위 p 요소에 바인딩하지만 이벤트 핸들러 자체는 n1 요소에 바인딩됩니다. 예 , 하위 p 요소의 클릭 이벤트는 처리를 위해 n1 요소에 위임됩니다. n2, n3, n9 중 하나가 click 이벤트를 트리거하는 한 body 요소에 바인딩된 이벤트 핸들러는 제거됩니다. 즉, n2, n3, n9는 총 1번만 이벤트 처리 기능을 실행할 수 있습니다.

// 在n1元素上为所有后代p元素的click事件绑定事件处理函数
// 只有n2、n3可以触发该事件
$("#n1").one("click", "p", function(event){
    alert( $(this).text() );
});
//新添加的n9也可以触发上述click事件，因为它也是n1的后代p元素
$("#n1").append(&#39;<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>&#39;);

다음 jQuery 코드를 다시 참고해주세요. 두 개의 div 요소가 있으므로 각 div 요소에는 하위 p 요소의 클릭 이벤트에 바인딩된 이벤트 핸들러가 있습니다.

// 在每个div元素上为其后代p元素的click事件绑定事件处理函数
// 只有n2、n3、n6、n7可以触发该事件
// n2和n3两者总共只能触发一次，n6和n7两者总共只能触发一次
$("div").one("click", "p", function(event){
    alert( $(this).text() );
});

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

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.one( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.one( "click.test", clickHandler );
var $n2 = $("#n2");
/* 由于one()函数绑定的事件处理函数是一次性的，因此下面的每行代码只能分别执行，无法同时执行 */
// 触发所有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")
one()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：
var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};
//为n5绑定mouseenter mouseleave两个事件
$("#n5").one( eventsMap );

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