Ringkasan penggunaan acara jQuery examples_jquery

Artikel ini meringkaskan penggunaan acara dalam jQuery secara terperinci dengan contoh, yang merupakan nilai rujukan yang baik untuk mempelajari jQuery. Kongsikan dengan semua orang untuk rujukan anda. Penggunaan khusus adalah seperti berikut:

1. Ikat peristiwa kepada unsur melalui nama kaedah:

$('li').click(function(event){})

2. Ikat peristiwa kepada unsur melalui kaedah ikatan:

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

Ia boleh dilihat bahawa melalui pengikatan, pelbagai peristiwa boleh diikat kepada elemen.

3. Ruang nama acara

Mengapa anda memerlukan ruang nama acara?

→ Katakan, ikat 2 peristiwa klik dahulu pada elemen li.

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→Sekarang kita perlu log keluar salah satu acara klik, yang mungkin ditulis seperti ini:

$('li').unbind('click')

Tetapi dengan cara ini, semua acara klik dalam li kami dilog keluar, yang bukan yang kami mahukan. Menggunakan ruang nama acara boleh menyelesaikan masalah ini Sebab mengapa ruang nama acara diperlukan adalah kerana ia memberikan kemudahan untuk kita semasa log keluar acara.

Bagaimana untuk menggunakan ruang nama acara?
→Apabila mengikat acara pada elemen, tambah ruang nama selepas nama acara, mematuhi format: nama acara. nama ruang nama.

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→Apabila log keluar daripada acara, anda boleh menulis seperti ini:

$('li').unbind('click.editMode')

4. Jenis acara

kabur
tukar
klik
dblclick
ralat
fokus
fokus
fokus
keydown
tekan kekunci
keyup
memuatkan
tetikus turun
tetikus
daun tikus
gerakan tetikus
keluar tetikus
moseover
tetikus
sedia
ubah saiz
tatal
pilih
serahkan
memunggah

5.satu kaedah

Digunakan untuk mencipta acara sekali sahaja Setelah acara ini dilaksanakan sekali, ia akan dipadamkan secara automatik.

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6. Padamkan acara

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.Atribut acara

Sebenarnya, ia adalah harta global jquery, jQuery.Event. Setiap kali peristiwa dicetuskan, tika objek Acara diserahkan kepada Pengendali Acara.

Acara boleh dibuat dan dicetuskan melalui pembina Acara.

var e = jQueery.Event("click")
jQuery("body").trigger(e);

Anda juga boleh menghantar objek tanpa nama dalam Acara melalui pembina.

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

Apabila digunakan, dapatkan nilai objek tanpa nama melalui event.data.KeyCode.

Objek tanpa nama boleh dihantar dalam Acara melalui pembina jQuery.Event Bukan itu sahaja, objek tanpa nama juga boleh dihantar melalui acara.

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

Ia boleh dilihat bahawa kunci objek tanpa nama boleh diperolehi melalui event.data.

Melalui kejadian objek Acara, anda juga boleh mendapatkan aspek maklumat lain, seperti:

$("p").click(function(event){
 alert(event.target.nodeName);
})

Di atas, dapatkan nama elemen yang mencetuskan acara melalui event.target.nodeName.

Sifat lain jQuery.Event termasuk:

Kekunci alt Benar jika kekunci alt ditekan Dalam papan kekunci Mac, kekunci alt ditandakan Pilihan
ctrKey kekunci ctrl ditekan
ShiftKey Kekunci Shift ditekan
semasaSasarkan elemen semasa dalam peringkat menggelegak
data
metaKey Umumnya kekunci Meta ialah Ctrl, tetapi pada Mac ia adalah kekunci Perintah
Koordinat mendatar kursor berbanding dengan asal halaman semasa acara tetikus pageX
pageY Koordinat menegak kursor berbanding dengan asal halaman semasa acara tetikus
relatedTarget Elemen yang kursor keluar atau masuk apabila acara tetikus dicetuskan
Koordinat mendatar kursor berbanding dengan asal skrin semasa acara tetikus screenX
screenY Koordinat menegak kursor berbanding dengan asal skrin semasa peristiwa tetikus
hasil mengembalikan nilai bukan tak pasti yang terbaharu daripada pengendali acara sebelumnya
elemen sasaran yang mencetuskan acara
cap masa Cap masa dalam milisaat apabila contoh jQuery.Event dibuat
taip jenis acara, seperti klik
yang Jika ia adalah acara papan kekunci, ia mewakili nombor kekunci Jika ia adalah acara tetikus, ia merekodkan sama ada butang kiri, butang tengah atau butang kanan ditekan

8.Kaedah acara

event.preventDefault() menghalang tingkah laku lalai
event.stopPropgation() menghentikan "bergelembung", iaitu berhenti menyebarkan lebih jauh ke atas DOM
event.stopImmediatePropagation() menghentikan penyebaran selanjutnya semua acara
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.kaedah secara langsung dan atas kaedah

Kaedah ini membolehkan kami mencipta acara untuk elemen yang belum wujud. Perbezaan daripada kaedah bind ialah ia boleh mengikat peristiwa kepada semua elemen padanan, dan tetapan ialah elemen yang belum wujud dan perlu dicipta secara dinamik. Selain itu, kaedah langsung tidak semestinya perlu diletakkan dalam pengendali sedia $(function(){}). Selepas jQuery 1.7, ia telah ditukar kepada kaedah on.

$("p").on("click", function(){
 alert("hello");
})

Jika anda ingin membatalkan pendaftaran acara:

$("button").click(function(){
 $("p").off("click");
})

10.kaedah pencetus

Kaedah pencetus boleh digunakan apabila kita ingin mencetuskan peristiwa yang terikat pada elemen secara manual.

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法的时候传入匿名对象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托

什么是事件冒泡？

有这么一段代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

现在，给该页面所有的元素绑定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。

如何阻止事件冒泡？

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它。

如何有效利用事件冒泡？

在jquery中，事件委托却很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a href="http://domain1.com">Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a href="http://domain4.com">Item #4</a></li>
 </ul>
</div>
</body>
</html>

现在，我们想给现有li中的a标签绑定事件，这样写：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？

$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。