Apakah maksud peristiwa mengikat jquery?

Dalam jquery, peristiwa mengikat bermaksud mengikat peristiwa masa biasa ke nod DOM Apabila nod DOM dipilih, ikat peristiwa itu untuk memudahkan pengguna menyediakan operasi yang sepadan Terdapat empat kaedah: mengikat, hidup, mewakilkan dan seterusnya untuk mengikat acara Kaedah langsung telah dialih keluar.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Apakah maksud peristiwa pengikatan jquery?

Pengikatan peristiwa: Ikat peristiwa biasa ke nod DOM Apabila nod DOM dipilih, peristiwa itu akan diikat untuk memudahkan pengguna untuk menyediakan operasi yang sepadan.

Contohnya: ikat acara klik tetikus pada butang butang, ikat acara fokus pada input, dsb. Contoh khusus: selalu tulis $('.bn1').click(fungsi dalam kod ( ){...}) ialah pengikatan peristiwa biasa.

Pelanjutan:

Delegasi acara: merujuk kepada menambah dan melanjutkan pengikatan acara berdasarkan pengikatan peristiwa, khususnya: mengikat acara melalui elemen nod anak Untuk menyampaikannya kepada nod DOM elemen induk (nod nenek moyang) untuk mengurus secara seragam semua elemen anak keturunannya.

Dengan cara ini, apabila anda menghadapi sub-elemen yang perlu terikat kepada banyak acara, anda boleh mengelakkan banyak masalah dan mengulangi kerja acara yang mengikat, dan menyediakan kecekapan akses. Kod khusus $('.div').on('click','.bn2',function(){...})

jquery mempunyai empat cara untuk mengikat acara. mengikat, hidup, mewakilkan, pada. Antaranya, live telah dialih keluar, dan lapisan bawah bind dan delegate dilaksanakan pada.

jquery mengesyorkan agar kami menggunakan pada untuk mengikat acara. Selain acara asli, jquery menyokong acara tersuai yang mengikat.

Kaedah yang paling biasa digunakan

$("selector").Nama acara (fungsi tanpa nama)

Contoh 1:

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

Contoh 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

Contoh 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

fungsi mengikat

$("selector").bind({"nama acara": fungsi tanpa nama})

Contoh 1:

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

Contoh 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

Contoh 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

注: Parameter fungsi bind di sini ialah kamus yang dibalut dengan 大括号, nilai utama ialah nama acara di bawah petikan berganda, dan nilai Nilai ialah kandungan fungsi, 一定一定一定 perhatikan format.

pada fungsi

dua parameter formal

$ ("pemilih" pada (). "nama acara", fungsi tanpa nama)

Contoh:

$("button").on("click",function(){
					//函数内容
				})

注: pada fungsi dengan dua parameter formal, digunakan dengan fungsi bind Kaedahnya serupa , tetapi formatnya berbeza dan boleh dihafal bersama.

Tiga parameter formal

mengandungi tiga parameter, yang sangat sesuai untuk nod induk dengan berbilang anak dan boleh mengawal acara nod anak secara seragam

$("Pemilih nod ibu bapa").on("Nama acara", "Nod anak, iaitu, elemen yang akan diikat", fungsi tanpa nama)

Contoh:

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

注: Pastikan anda memberi perhatian kepada senario penggunaan dengan tiga parameter dan perhatikan penggunaan kata kunci ini

fungsi perwakilan

Fungsi perwakilan mempunyai tiga parameter formal, yang serupa dengan fungsi hidup Perbezaannya ialah kedudukan parameter adalah berbeza.

$("pemilih nod ibu bapa").delegate("nod anak, iaitu elemen yang akan diikat", "nama acara", fungsi tanpa nama)

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

注: Pastikan anda ambil perhatian bahawa susunan parameter di sini berbeza daripada fungsi hidup.

Ringkasan

• Melihat peristiwa mengikat di atas, anda boleh mendapati bahawa peristiwa mengikat yang berbeza hanya menukar kata kunci dan senarai parameter yang sepadan
• Semua mereka mempunyai persamaan ialah $("选择器").函数名(参数列表); kandungan senarai parameter tidak lebih daripada nama acara, dan fungsi tanpa nama, atau pemilih nod anak
• Fungsi tanpa nama di sini sebenarnya adalah storan Alamat badan kod adalah bersamaan dengan alamat sebagai parameter Hanya untuk mengurangkan jumlah kod, alamat fungsi digantikan secara langsung dengan fungsi tanpa nama.

Templat

模板
最常用	$(“选择器”).事件名称(匿名函数)
bind函数	$(“选择器”).bind({“事件名称”:匿名函数})
on函数	$(“选择器”).on(“事件名称”,匿名函数)
	$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)
delegate函数	$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

Paling biasa digunakan

$("selector").Nama acara (fungsi tanpa nama)

fungsi bind

$("selector").bind({"event name": anonymous function})

on function

$("selector" ). on("Nama acara", fungsi tanpa nama)

$("Pemilih nod induk").on("Nama Acara", "nod anak, iaitu, elemen yang akan diikat", fungsi tanpa nama)

fungsi perwakilan

$("pemilih nod ibu bapa") .delegate ("nod anak, iaitu elemen yang akan diikat", "nama acara", fungsi tanpa nama)

Cadangan tutorial video: jQuery Tutorial video

Atas ialah kandungan terperinci Apakah maksud peristiwa mengikat jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!