Apakah itu acara?
Respons halaman kepada pelawat yang berbeza dipanggil acara.
Pengendali acara merujuk kepada kaedah yang dipanggil apabila peristiwa tertentu berlaku dalam HTML.
Contoh:
Gerakkan tetikus pada elemen.
Pilih butang radio
Elemen klik
Istilah "pencetus" (atau "api") sering digunakan dalam acara seperti: "tekanan kekunci terbakar apabila anda menekan kekunci peristiwa".
Acara DOM biasa:
Acara tetikus klik dblclick mouseenter mouseleave
kekunci tekan kekunci kekunci kabur
acara borang serah tukar fokus bongkar
beban acara dokumen/tetingkap ubah saiz skrol
Sintaks Kaedah acara jQuery
Dalam jQuery, kebanyakan acara DOM mempunyai kaedah jQuery yang setara.
Nyatakan acara klik pada halaman:
$("p").click();
Langkah seterusnya ialah menentukan bila untuk mencetuskan peristiwa itu. Anda boleh mencapai ini melalui fungsi acara:
$("p").click(function(){
// Kod dilaksanakan selepas tindakan dicetuskan!!
}) ;
Kaedah acara jQuery yang biasa digunakan
$(document).ready()
$(document).ready() kaedah membolehkan kami memuatkan dokumen selepas ia dimuatkan sepenuhnya Laksanakan fungsi. Kaedah acara ini telah disebut dalam bab Sintaks jQuery. Kaedah
klik()
klik() ialah fungsi yang dipanggil apabila peristiwa klik butang dicetuskan.
Fungsi ini dilaksanakan apabila pengguna mengklik pada elemen HTML.
Dalam contoh berikut, apabila peristiwa klik dicetuskan pada unsur <p> elemen diklik dua kali, peristiwa dblclick berlaku. Kaedah
dblclick() mencetuskan peristiwa dblclick, atau menentukan fungsi untuk dijalankan apabila peristiwa dblclick berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>mouseenter()
Apabila penuding tetikus melalui elemen, ia akan Peristiwa masuk tetikus berlaku. Kaedah
mouseenter() mencetuskan acara mouseenter, atau menentukan fungsi yang akan dijalankan apabila acara mouseenter berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>
mouseleave()
Apabila penunjuk tetikus Apabila meninggalkan elemen, peristiwa meninggalkan tetikus berlaku. Kaedah mouseleave() mencetuskan acara mouseleave, atau menentukan fungsi untuk dijalankan apabila acara mouseleave berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>mousedown()
Apabila penunjuk tetikus bergerak ke atas elemen, dan Peristiwa turun tetikus berlaku apabila butang tetikus ditekan. Kaedah
mousedown() mencetuskan acara mousedown, atau menentukan fungsi untuk dijalankan apabila acara mousedown berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>mouseup()
Apabila butang tetikus dilepaskan pada elemen , acara mouseup akan berlaku. Kaedah
mouseup() mencetuskan acara mouseup, atau menentukan fungsi yang akan dijalankan apabila acara mouseup berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>
hover()
hover() Kaedah yang digunakan untuk mensimulasikan peristiwa hover kursor. Apabila tetikus bergerak ke atas elemen, fungsi pertama yang ditentukan (masuk tetikus) akan dicetuskan; apabila tetikus bergerak keluar dari elemen, fungsi kedua yang ditentukan (mouseleave) akan dicetuskan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
fokus()
Apabila elemen mendapat fokus, peristiwa fokus berlaku. Apabila elemen dipilih dengan klik tetikus atau diletakkan dengan kekunci tab, elemen itu mendapat fokus. Kaedah
focus() mencetuskan acara fokus, atau menentukan fungsi yang akan dijalankan apabila acara fokus berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
blur()
Apabila elemen hilang Apabila difokuskan, peristiwa kabur berlaku. Kaedah blur() mencetuskan acara kabur atau menentukan fungsi untuk dijalankan apabila peristiwa kabur berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br><br>
Email: <input type="text" name="email">
</body>
</html>bahagian seterusnya
