masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Contoh fungsi acara jQuery biasa

contoh fungsi bind( type, [data], fn )

bind() ialah fungsi yang paling biasa digunakan Beri perhatian kepada parameter data dalam tandatangan kaedah. Anda boleh menghantar beberapa data tambahan sebelum pemprosesan acara: 

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

Perhatikan penggunaan parameter acara Objek acara disatukan dalam jQuery, dan objek acara diluluskan sebagai satu-satunya parameter fungsi pemprosesan acara.

data Kami juga perlu mengakses parameter melalui event.data Mengapa kami perlu menyediakan parameter data?

Oleh kerana kami sering menghadapi masalah ini: kami berharap dapat melakukan yang istimewa. pemprosesan berdasarkan data tertentu daripada sumber acara semasa pemprosesan acara.

Pada masa ini terdapat dua penyelesaian kontroversi di Internet:

(1) Gunakan atribut elemen tersuai untuk menyimpan data.

Contohnya: 

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

Dapatkan data dalam fungsi pemprosesan acara:

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

fungsi attr ialah pengetahuan daripada kuliah sebelumnya Ia digunakan untuk mendapatkan ". atribut elemen" elemen dan boleh mendapatkan atribut elemen tersuai. Klik div akan dipaparkan:


image_thumb.png

(2) Gunakan skrip untuk menghantar data kepada pengendali acara: <🎜 Elemen >

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

tidak mempunyai sebarang atribut tersuai Apabila menambah pengendali acara, data tambahan akan dihantar: 

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

The. hasil selepas mengklik div adalah sama seperti kaedah 1:

image_thumb_1.png


Kaedah 1 mudah untuk menyimpan dan mencari data jangan lulus pengesahan W3C.

Kaedah 2 mesti mencari cara untuk menyimpan data sendiri dan Membangunkan peraturan untuk mencari data untuk elemen yang ditentukan.

Dari perspektif "pembangun", kaedah 1 ialah lebih ringkas dan lebih intuitif. Walau bagaimanapun, kekurangannya adalah serius, jadi sila tentukan sendiri cara untuk memilih.

satu( taip , [data], fn) Fungsinya sama seperti bind, tetapi ia hanya dilaksanakan. sekali.

2. trigger(event, [data]) dan triggerHandler(event, [data])

Walaupun Elemen terikat pada acara tertentu, seperti klik, tetapi kadangkala anda mahu mencetuskan peristiwa ini dalam program. Kedua-dua fungsi ini boleh mencapai fungsi ini

Perbezaan utama ialah pencetus akan mencetuskan tindakan lalai penyemak imbas, manakala triggerHandler Ia tidak akan bermula.

Kedua-dua fungsi tersebut. boleh dibezakan dengan jelas melalui contoh berikut:

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

Apabila butang ".trigger" diklik, Focused akan dipanggil dua kali, dan elemen input akan Difokuskan:

image_thumb_4.png


Apabila butang ".triggerHandler" diklik, ia hanya dipanggil sekali dan elemen input tidak mendapat fokus:

image_thumb_3.png


Dalam erti kata lain, fungsi pencetus mencetuskan tingkah laku lalai penyemak imbas untuk mendapatkan fokus, membenarkan elemen input mendapat fokus, jadi fokus dipanggil semula Fungsi pengendalian acara.

triggerHandler hanya memanggil fungsi pengendalian acara terikat pada acara fokus dan tidak mencetuskan gelagat penyemak imbas, jadi elemen input akhir tidak mendapat fokus.

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan