Kaedah acara asas: 1. klik(), tetapkan acara klik tetikus; 2. dblclick(), tetapkan acara klik dua kali tetikus 3. tukar(), tetapkan acara perubahan kandungan; fokus(), Tetapkan peristiwa fokus pencetus; 5. blur(), tetapkan peristiwa kehilangan fokus;
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
Kaedah peristiwa mencetuskan atau menambah fungsi pada pengendali acara bagi elemen yang dipilih.
Jadual berikut menyenaraikan beberapa kaedah jQuery untuk mengendalikan acara.
| 方法 | 描述 |
|---|---|
| bind() | 向元素添加事件处理程序 |
| blur() | 添加/触发失去焦点事件 |
| change() | 添加/触发 change 事件 |
| click() | 添加/触发 click 事件 |
| dblclick() | 添加/触发 double click 事件 |
| die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
| focus() | 添加/触发 focus 事件 |
| focusin() | 添加事件处理程序到 focusin 事件 |
| focusout() | 添加事件处理程序到 focusout 事件 |
| hover() | 添加两个事件处理程序到 hover 事件 |
| keydown() | 添加/触发 keydown 事件 |
| keypress() | 添加/触发 keypress 事件 |
| keyup() | 添加/触发 keyup 事件 |
| live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
| mousedown() | 添加/触发 mousedown 事件 |
| mouseenter() | 添加/触发 mouseenter 事件 |
| mouseleave() | 添加/触发 mouseleave 事件 |
| mousemove() | 添加/触发 mousemove 事件 |
| mouseout() | 添加/触发 mouseout 事件 |
| mouseover() | 添加/触发 mouseover 事件 |
| mouseup() | 添加/触发 mouseup 事件 |
| off() | 移除通过 on() 方法添加的事件处理程序 |
| on() | 向元素添加事件处理程序 |
| one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
| ready() | 规定当 DOM 完全加载时要执行的函数 |
| toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
| trigger() | 触发绑定到被选元素的所有事件 |
| triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
| unbind() | 从被选元素上移除添加的事件处理程序 |
| undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
1. Fungsi acara di atas mempunyai tiga kegunaan:
//直接绑定事件到元素上
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value) //通过对象e获取输入的值
});
//传递参数调用函数处理
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 通过e传递参数数据
});
//手动触发已绑定的点击事件
$elem.click()2 Perbezaan antara tetikus dan tetikus penunjuk melalui elemen yang dipilih atau elemen anaknya, akan mencetuskan acara alih tetikus, yang dipanggil menyokong pemprosesan gelembung merujuk kepada peristiwa yang ditakrifkan bersama oleh elemen anak dan elemen induk elemen dicetuskan, atau elemen anak tidak ditakrifkan, peristiwa Ia akan disebarkan kepada induk, menyebabkan peristiwa induk dicetuskan. Acara tetikus hanya dicetuskan apabila penuding tetikus melepasi elemen yang dipilih.
3. Elemen borang mempunyai tingkah laku lalai untuk menyerahkan borang Jika ia diproses melalui serahan, tingkah laku lalai penyemak imbas ini perlu dilumpuhkan. Cara tradisional ialah memanggil objek acara e.preventDefault() untuk mengendalikannya Dalam jQuery, anda boleh terus mengembalikan palsu pada penghujung fungsi.
//回车键或者点击提交表单后禁止浏览器默认跳转：
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
});4 Gunakan pada()
Penggunaan asas: .on(events,[selector],[data])
Ikatan yang paling biasa pada elemen A klik acara, bandingkan perbezaan antara pintasan dan kaedah on
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
//多个事件绑定同一个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });
//多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
//将数据传递到处理程序
$( "button" ).on( "click", { //第二个参数传递数据给函数调用
name: "Mr.Tory"
}, greet );
function greet( event ) {
alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}
$("#content").click(function(event) {
$("#msg").html("<p>外层div元素被单击</p>");
event.stopPropagation(); //通过event方法阻止事件冒泡
});Salin selepas log masuk | Jenis acara. Jika anda menggunakan pengendali acara untuk mengendalikan berbilang acara, anda boleh menggunakan atribut ini untuk mendapatkan jenis acara, seperti klik |
||||||||||||||||||
| .data | Parameter tambahan dihantar apabila acara dipanggil | ||||||||||||||||||
| .target | cetuskan Elemen DOM acara | ||||||||||||||||||
| .yang | Menunjukkan kekunci atau butang mana yang ditekan|||||||||||||||||||
| .timeStamp | Hartanah ini mengembalikan bilangan milisaat dari 1 Januari 1970 hingga masa kejadian td> | ||||||||||||||||||
| .pageX/Y | Berbanding dengan sebelah kiri dokumen /Kedudukan tetikus di tepi atas | ||||||||||||||||||
| .hasil | Nilai yang dikembalikan oleh fungsi pengendali acara yang sama sebelumnya | ||||||||||||||||||
| .preventDefalut() | Halang tindakan lalai acara td> | ||||||||||||||||||
| .stopPropagation() | Batalkan acara menggelegak |
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
