Apakah itu acara?
Respon halaman kepada pelawat yang berbeza dipanggil acara.
Pengendali acara merujuk kepada kaedah yang dipanggil apabila peristiwa tertentu berlaku dalam HTML.
Contoh:
Istilah "pencetus" sering digunakan dalam peristiwa "(atau "api") Contohnya: "Acara penekan kekunci menyala apabila anda menekan kekunci."
Acara DOM biasa:
| 事件 | 说明 |
|---|
| click | 鼠标点击时触发此事件 |
| keypress | 键盘上的键被按下再次释放时触发 |
| submit | 表单被提交时触发 |
| load | 页面加载完触发 |
| dblclick | 鼠标双击是触发 |
| keydown | 键盘上的键被按下时触发 |
| change | 当前元素失去焦点并且元素内容发生改变时触发 |
| resize | 浏览器窗口大小被改变时触发 |
| mouseenter | 添加/触发 mouseenter 事件 |
| keyup | 键盘上的键被按下后松开时触发 |
| focus | 当某个元素失去焦点时触发 |
| scroll | 添加/触发 scroll 事件 |
| mouseleave | 添加/触发 mouseleave 事件 |
| blur | 添加/触发 blur 事件 |
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()
Kaedah $(document).ready() membolehkan kami melaksanakan fungsi selepas dokumen dimuatkan sepenuhnya. 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 di bawah, apabila peristiwa klik dicetuskan pada elemen <p> <p> semasa disembunyikan:
<!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>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>Jalankan program untuk mencubanya
dblclick()
Apabila elemen diklik dua kali, peristiwa dblclick berlaku.
Kaedah dblclick() mencetuskan acara 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").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>Jalankan atur cara untuk mencubanya
mouseenter()
Acara mouseenter berlaku apabila penuding tetikus melalui elemen.
Kaedah mouseenter() mencetuskan acara mouseenter, atau menentukan fungsi untuk 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(){
$("#p1").mouseenter(function(){
alert("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>Jalankan atur cara dan cuba
mousedown()
Peristiwa turun tetikus berlaku apabila penuding tetikus bergerak ke atas elemen dan 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").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>Jalankan atur cara untuk mencubanya
kaedah tuding()
kaedah tuding() digunakan untuk mensimulasikan peristiwa tuding 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">
<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>Jalankan program dan cuba
fokus()
Acara fokus berlaku apabila elemen mendapat fokus.
Apabila elemen dipilih dengan klik tetikus atau diletakkan dengan kekunci tab, elemen itu mendapat fokus.
Kaedah fokus() mencetuskan acara fokus, atau menentukan fungsi untuk dijalankan apabila acara fokus 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>
Email: <input type="text" name="email">
</body>
</html>Jalankan atur cara dan cuba
Jika anda berminat, anda boleh mencuba Acara lain
bahagian seterusnya