Apakah kaedah acara asas dalam jquery?

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()	从现在或未来的被选元素上移除事件处理程序

Arahan:

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
}

Sifat dan kaedah objek acara

Menunjukkan kekunci atau butang mana yang ditekan

.type	事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
.data	事件调用时传入额外参数
.target	触发该事件的 DOM 元素
.which	指示按了哪个键或按钮
.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
.pageX/Y	相对于文档左/上边缘的鼠标位置
.result	上一个相同事件处理器函数返回的值
.preventDefalut()	阻止事件的默认动作
.stopPropagation()	取消事件冒泡

.type

$("#content").click(function(event) {
   $("#msg").html("<p>外层div元素被单击</p>");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

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

.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

[Pembelajaran yang disyorkan: tutorial video jQuery, depan web- tamatkan video]

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