Rumah > Artikel > hujung hadapan web > Apakah cara untuk memantau acara jquery?
Apakah cara untuk memantau acara jquery?
- 青灯夜游asal
- 2022-06-10 13:55:583658semak imbas
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.
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()等都是其简化用法）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; 🎜>
<!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>
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可选
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>
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
delegate(selector,type,[data],fn)Definisi: Ikat acara mendengar kepada elemen induk terdekat
("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素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> Ciri. :
Anda juga boleh menggunakan pemantauan acara untuk teg yang baru ditambah di bawah elemen induk
Ia juga menyokong pemprosesan acara berbilang masa
on(type, 选择器，方法)
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!