Contoh penggunaan kaedah on() dalam jQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan kaedah on() dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kaedah ini boleh mengikat satu atau lebih pengendali acara kepada elemen padanan. Gunakan kaedah off() untuk memadamkan acara yang terikat dengan kaedah on().

Struktur tatabahasa 1:

Salin kod Kod adalah seperti berikut: $(selector).on(events,[selector] ,[data ],fn) Senarai parameter:

<table class="t_table" cellspacing="0" style="border-bottom: rgb(227,237,245) 1px solid; border-left: rgb(227,237,245) 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 660px; border-collapse: collapse; font: small/19px Tahoma, 'Microsoft Yahei', Simsun; word-wrap: break-word; white-space: normal; empty-cells: show; table-layout: auto; letter-spacing: normal; height: 160px; color: rgb(68,68,68); border-top: rgb(227,237,245) 1px solid; border-right: rgb(227,237,245) 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> Parameter Penerangan acara Satu atau lebih jenis acara yang diasingkan ruang dan ruang nama pilihan. pemilih Pilihan. Rentetan pemilih yang menapis elemen terpilih yang unsur turunannya akan memanggil pengendali. Jika pilihan kosong atau diabaikan, acara sentiasa dicetuskan apabila ia mencapai elemen yang dipilih. data Pilihan. Objek data tambahan yang dihantar kepada objek acara sebagai nilai harta peristiwa.data untuk diproses oleh fungsi pengendali acara. fn Fungsi dilaksanakan apabila acara ini dicetuskan. Nilai palsu juga boleh digunakan sebagai singkatan untuk fungsi yang mengembalikan palsu. Kod contoh:

Contoh 1:

Salin kod Kod adalah seperti berikut: Laman Utama Skrip div{ lebar:60px; ketinggian:60px; sempadan:1px hijau pepejal; saiz fon:12px; } $(document).ready(function(){ $("div").on("klik",fungsi(){ $(this).text("Selamat Datang ke Rumah Skrip"); }) }) Kandungan asal

Kod di atas mengikat acara klik pada div Apabila div diklik, kandungan teks baharu boleh ditetapkan untuk div.

Contoh 2:

Salin kod Kod adalah seperti berikut: Laman Utama Skrip div{ lebar:60px; ketinggian:60px; sempadan:1px hijau pepejal; saiz fon:12px; } $(document).ready(function(){ $("div").on("klik mousemove",function(){ $(this).text("Selamat Datang ke Rumah Skrip"); }) }) Kandungan asal

Kod di atas mengikat dua acara ke div sama ada anda mengklik div atau menggerakkan tetikus dalam div, kandungan teks baharu akan ditetapkan untuk div. Contoh 3:

Salin kod Kod adalah seperti berikut: Laman Utama Skrip div{ lebar: 60px; tinggi:60px; sempadan:1px hijau pepejal; saiz fon: 12px; } $(document).ready(function(){ var newtext="Ini adalah teks baharu" $("div").on("click",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) Kandungan asal

Kod di atas menggunakan parameter data untuk menghantar data ke fungsi pemprosesan peristiwa terikat.

Contoh 4:

Salin kod

Kod adalah seperti berikut: 脚本之家 .ibu bapa{ lebar:160px; ketinggian:160px; sempadan:1px hijau pepejal; saiz fon:12px; } .kanak-kanak{ lebar:100px; ketinggian:100px; jidar:1px merah pepejal; } span{warna latar:hijau;} $(document).ready(function(){ var newtext="这是新文本" $(".parent").on("click",".children",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) 原来内容 大家好 以上代码通过通过选择器字符串来过滤匹配元素的子元素中哪些可以碳的。代码中，类名为children的元素和它的子元素可以调用绑定的事件。 语法结构二:

复制代码 代码如下: $(pemilih).pada(objek,[pemilih data],[pemilih data] ]) Senarai parameter:

<table class="t_table" cellspacing="0" style="border-bottom: rgb(227,237,245) 1px solid; border-left: rgb(227,237,245) 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 663px; border-collapse: collapse; font: small/19px Tahoma, 'Microsoft Yahei', Simsun; word-wrap: break-word; white-space: normal; empty-cells: show; table-layout: auto; letter-spacing: normal; height: 151px; color: rgb(68,68,68); border-top: rgb(227,237,245) 1px solid; border-right: rgb(227,237,245) 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> 参数 描述 object 一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。 selector 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 data 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 Kod contoh:

Salin kod Kod adalah seperti berikut: Laman Utama Skrip div{ lebar: 160px; ketinggian:160px; sempadan:1px hijau pepejal; saiz fon: 12px; } $(document).ready(function(){ var newtext="Ini adalah teks baharu" $("div").on({klik:function(e){ $(this).text(e.data.mytext); }},{"teks saya":teks baharu}) }) Kandungan asal

Dalam kod di atas, jenis acara dan fungsi pemprosesan acara diikat dalam bentuk objek.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Parameter	Penerangan
acara	Satu atau lebih jenis acara yang diasingkan ruang dan ruang nama pilihan.
pemilih	Pilihan. Rentetan pemilih yang menapis elemen terpilih yang unsur turunannya akan memanggil pengendali. Jika pilihan kosong atau diabaikan, acara sentiasa dicetuskan apabila ia mencapai elemen yang dipilih.
data	Pilihan. Objek data tambahan yang dihantar kepada objek acara sebagai nilai harta peristiwa.data untuk diproses oleh fungsi pengendali acara.
fn	Fungsi dilaksanakan apabila acara ini dicetuskan. Nilai palsu juga boleh digunakan sebagai singkatan untuk fungsi yang mengembalikan palsu.