Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah cara untuk memantau acara jquery?

Apakah cara untuk memantau acara jquery?

青灯夜游
Lepaskan: 2023-01-28 15:53:54
asal
3672 orang telah melayarinya

jQuery menyediakan empat kaedah pemantauan acara: 1. Menggunakan bind(), anda boleh menambah satu atau lebih pengendali acara pada elemen yang dipilih dan menetapkan fungsi pemprosesan acara 2. Gunakan live(), Anda boleh menambah satu atau lebih banyak pengendali acara kepada elemen padanan semasa atau masa hadapan dan tetapkan fungsi pemprosesan 3. Menggunakan delegate(), anda boleh menambah satu atau lebih pengendali acara untuk elemen yang ditentukan (kepunyaan elemen anak elemen yang dipilih) 4 . Menggunakan on(), anda boleh menambah satu atau lebih pengendali acara pada elemen dan sub-elemen yang dipilih.

Apakah cara untuk memantau acara jquery?

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

jQuery menyediakan pelbagai cara untuk mengikat acara Setiap kaedah mempunyai ciri tersendiri. Memahami persamaan dan perbezaan antara mereka akan membantu kita membuat pilihan yang tepat semasa menulis kod, supaya dapat menulis Produce elegant dan mudah. untuk mengekalkan kod. Mari kita lihat cara untuk mengikat acara dalam jQuery.

jQuery menyediakan empat kaedah pemantauan acara, iaitu bind, live, delegate, on, dan fungsi yang sepadan untuk membuka sekatan pemantauan ialah unbind, die, undelegate, off

1. Blind

takrifan dan penggunaan: tambah satu atau lebih pengendali acara pada elemen yang dipilih dan nyatakan fungsi untuk dijalankan apabila peristiwa itu berlaku.

Sintaks:

$(selector).blind("事件类型",data,function(){});
//data是传入函数的参数用event.data获取(平时用的.click()等都是其简化用法)
Salin selepas log masuk

Ciri

  • sesuai untuk halaman statik ia hanya boleh terikat pada elemen yang sudah wujud apabila ia dipanggil , bukan untuk Mengikat elemen baharu pada masa hadapan

  • hanya akan dibutakan apabila halaman dimuatkan; 🎜>

2 secara langsung
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").bind("click", function() {
					console.log("这个段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点我!</p>

	</body>
</html>
Salin selepas log masuk

Apakah cara untuk memantau acara jquery?Definisi: Tambahkan satu atau lebih pengendali acara pada elemen padanan semasa atau akan datang; > Sintaks:

Ciri-ciri: langsung tidak mengikat acara kepada dirinya sendiri (ini), tetapi dengan ini.konteks

Ia dilengkapkan dengan menggunakan mekanisme delegasi acara Untuk pemantauan acara dan memproses, mewakilkan pemprosesan nod untuk mendokumenkan

Elemen yang baru ditambah tidak perlu terikat kepada pendengar lagi dan boleh mengendalikan berbilang acara

hanya boleh diletakkan selepas dipilih secara langsung elemen.
live("事件类型",data, 函数名);//data可选
Salin selepas log masuk

Nota: Kaedah live() telah ditamatkan dalam jQuery versi 1.7 dan dialih keluar dalam versi 1.9. Sila gunakan kaedah on() sebaliknya.

3. mewakilkan
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-1.7.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").live("click", function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>点我!</button>
		<br><br>
	</body>
</html>
Salin selepas log masuk

Apakah cara untuk memantau acara jquery?kaedah delegate() menambah satu atau lebih pengendali acara pada elemen yang ditentukan (kepunyaan elemen anak elemen yang dipilih) dan menetapkan apabila Functions yang dijalankan apabila peristiwa ini berlaku.

Pengendali acara menggunakan kaedah delegate() digunakan pada elemen semasa atau akan datang (seperti elemen baharu yang dicipta oleh skrip).

Sintaks:

Ciri: Penggunaan proksi acara yang lebih tepat dalam julat yang kecil, prestasi lebih baik daripada .live(). Boleh digunakan pada elemen yang ditambah secara dinamik.

Contoh: Apabila mengklik elemen

di dalam elemen

4 pada
delegate(selector,type,[data],fn)
Salin selepas log masuk

Definisi: Ikat acara mendengar kepada elemen induk terdekat
("父级选择器").delegate(".a","click",function())//表示:.a的事件通过父级元素进行委托,(this)获取的是触发事件的子元素
Salin selepas log masuk

Sintaks:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("div").delegate("p", "click", function() {
					$("p").css("background-color", "pink");
				});
			});
		</script>
	</head>
	<body>

		<div style="background-color:yellow">
			<p>这个段落在 div 元素内。</p>
		</div>
		<p>这是一个段落。</p>

	</body>
</html>
Salin selepas log masuk

Ciri. : Apakah cara untuk memantau acara jquery?

Anda juga boleh menggunakan pemantauan acara untuk teg yang baru ditambah di bawah elemen induk

Ia juga menyokong pemprosesan acara berbilang masa

on(type, 选择器,方法)
Salin selepas log masuk

Contoh:

  • [Pembelajaran yang disyorkan:
  • tutorial video jQuery

    ,

    bahagian hadapan web video
  • ]

Atas ialah kandungan terperinci Apakah cara untuk memantau acara jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan