일반적인 jQuery 이벤트 함수의 예

bind( type, [data], fn ) 함수 예

bind()는 가장 일반적으로 사용되는 함수입니다. 이벤트 처리 전에 몇 가지 추가 데이터를 전달할 수 있습니다.

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

이벤트 매개변수 사용에 주의하세요. 이벤트 객체는 jQuery에서 통합되어 있으며 이벤트 처리 함수의 유일한 매개변수로 이벤트 객체가 전달됩니다.

event.data를 통해 데이터 매개변수에 액세스해야 합니다. . 데이터 매개변수를 제공해야 하는 이유는 무엇입니까?

우리는 종종 다음과 같은 문제에 직면합니다. 이벤트 처리 중에 이벤트 소스의 특정 데이터를 기반으로 특수 처리를 수행하려고 합니다.

현재 인터넷에는 논란의 여지가 있는 두 가지 솔루션이 있습니다. :

(1) 사용자 정의 요소 속성을 사용하여 데이터를 저장합니다.

예:

<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>

이벤트 처리 함수에서 데이터 가져오기:

$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });

attr 함수는 이전 강의에서 얻은 지식으로 데이터를 가져오는 데 사용됩니다. 요소의 "요소 속성"을 가져오고 사용자 정의된 요소 속성을 얻을 수 있습니다. div 다음에 다음이 표시됩니다.

(2) 스크립트를 사용하여 이벤트 핸들러 함수에 데이터를 전달합니다.

<div id="testDiv6">获取自定义数据-2</div>

요소에는 사용자 정의 속성이 없으며 이벤트 핸들러 기능을 추가할 때 추가 데이터가 전달됩니다.

$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });

div를 클릭한 후의 결과는 방법 1과 동일합니다.

방법 1은 데이터를 저장하고 검색하는 데 편리합니다. 그러나 사용자 정의 속성은 W3C에서 검증되지 않습니다.

방법 2는 데이터를 직접 저장할 방법을 찾아야 하며, 지정된 데이터를 찾기 위한 규칙을 공식화해야 합니다.

"개발자"의 관점에서는 1번 방법이 더 간단하고 직관적입니다. 그러나 단점은 심각하므로 선택 방법을 스스로 결정할 수 있습니다. 함수는 바인딩과 동일하지만 한 번만 실행됩니다.

2.trigger( event, [data] ) 및 TriggerHandler( event, [data] )

클릭과 같은 특정 이벤트가 요소에 바인딩되는 경우도 있습니다. 프로그램에서 이러한 이벤트를 트리거하면 이 두 함수가 이 기능을 수행할 수 있습니다.

가장 큰 차이점은 Trigger가 브라우저의 기본 동작을 트리거하는 반면, TriggerHandler는 그렇지 않다는 것입니다.

두 함수는 다음 예를 통해 명확하게 구분할 수 있습니다. :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>jQuery事件处理:trigger和triggerHandler示例</title>
    script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("#old").click(function()
            {
                $("#divResult").html("");
                $("input").trigger("focus");
            });
            $("#new").click(function()
            {
                $("#divResult").html("");
                $("input").triggerHandler("focus");
            });
            $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });
        })        
    </script></head><body>
    <button id="old">
        .trigger("focus")</button>
    <button id="new">
        .triggerHandler("focus")</button><br />
    <br />
    <input type="text" value="To Be Focused" />
    <div id="divResult"></div>
    </body>
    </html>

".trigger" 버튼을 클릭하면 Focused가 두 번 호출되고 입력 요소가 포커스를 받습니다.

".triggerHandler" 버튼을 클릭하면 Focused가 한 번만 호출됩니다. 입력 요소가 포커스를 얻습니다 요소가 포커스를 얻지 못합니다:

즉, 트리거 함수는 포커스를 얻는 브라우저의 기본 동작을 트리거하여 입력 요소가 포커스를 얻을 수 있도록 하므로 포커스 이벤트 핸들러가 다시 호출됩니다.

triggerHandler는 포커스를 바인딩하기 위해서만 호출됩니다. 이벤트 이벤트 핸들러 함수는 브라우저 동작을 트리거하지 않으므로 최종 입력 요소가 포커스를 받지 못합니다.

지속적인 학습

새로운 파일

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery事件处理:trigger和triggerHandler示例</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { $("#old").click(function() { $("#divResult").html(""); $("input").trigger("focus"); }); $("#new").click(function() { $("#divResult").html(""); $("input").triggerHandler("focus"); }); $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); }); }) </script> </head> <body> <button id="old"> .trigger("focus")</button> <button id="new"> .triggerHandler("focus")</button><br /> <br /> <input type="text" value="To Be Focused" /> <div id="divResult"></div> </body> </html>

제출하다 코드 재설정

자동운전