您當(dāng)前位置：首頁 > web前端 > htmlcss > 前端編程提高之旅（十五）----jquery事件

前端編程提高之旅（十五）----jquery事件

來源：程序員人生發(fā)布時(shí)間：2014-12-22 08:18:25 閱讀次數(shù)：4634次

HTML與js交互主要通過用戶與閱讀器操作頁面時(shí)引發(fā)事件。文檔或某些元素產(chǎn)生某些變化或操作時(shí)，閱讀器會(huì)生成事件。jquery增加了事件處理能力。

jquery事件部份可以從以下5部份理解：

1、加載DOM函數(shù)

這里指的以下方法：

$(document).ready(function(){ })

相比于傳統(tǒng)的window.onload方法，前者在履行時(shí)機(jī)與可否屢次使用上區(qū)分于后者。

前者是在DOM完全就緒回調(diào)就會(huì)被調(diào)用，后者則是網(wǎng)頁所有元素（包括關(guān)聯(lián)文件）完全加載到閱讀器后才會(huì)被調(diào)用。這里常見利用場景是，當(dāng)需要對圖片進(jìn)行操作時(shí)，需要采取后者，由于后者才能保證圖片文件被加載完成履行。

前者可以屢次使用，而后者只能使用1次，即使屢次定義，后定義的函數(shù)會(huì)將之前定義的函數(shù)覆蓋掉。

2、各種事件綁定的方法

(1）1般綁定方法：bind方法

bind方法參數(shù)分別定義事件類型、回調(diào)函數(shù)。

構(gòu)建1個(gè)實(shí)例，HTML以下：

<div id="panel"> <h5 class="head">甚么是jQuery?</h5> <div class="content"> jQuery是繼Prototype以后又1個(gè)優(yōu)秀的JavaScript庫，它是1個(gè)由 John Resig 創(chuàng)建于2006年1月的開源項(xiàng)目。jQuery憑仗簡潔的語法和跨平臺(tái)的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、履行動(dòng)畫和開發(fā)Ajax。它獨(dú)特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫程序的方式。 </div> </div>

bind使用代碼以下：

$("#panel h5.head").bind("click",function(){ var $content = $(this).next(); if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } })

需要注意的是，回調(diào)函數(shù)內(nèi)，this指的是帶有相應(yīng)行動(dòng)的DOM元素，如需使用jquery中方法，徐將其轉(zhuǎn)化為Jquery對象$(this)情勢。

（2）在bind基礎(chǔ)上，簡寫綁定方法

簡寫的綁定方法，方法名代表事件類型，參數(shù)為回調(diào)函數(shù)。

仍然延續(xù)上例，簡寫方法使用以下：

$("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); })

（3）合成事件

這里合成事件有兩個(gè)hover方法與toggle方法。

hover方法用于摹擬鼠標(biāo)懸停事件，有兩個(gè)回調(diào)函數(shù)作為參數(shù)，第1個(gè)回調(diào)代表光標(biāo)移入履行，第2個(gè)回調(diào)代表光標(biāo)移出履行。

沿用上例，使用方法以下：

$("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); })

toggle方法用于摹擬鼠標(biāo)連續(xù)單擊行動(dòng)，參數(shù)為多個(gè)回調(diào)，每一個(gè)回調(diào)會(huì)根據(jù)單擊次序順序循環(huán)履行。

不過這個(gè)方法在jquery1.9版本已被刪除，這里其實(shí)不多做討論。

（4）摹擬操作

摹擬的是操作，也即是交互行動(dòng)，從而引發(fā)事件，履行回調(diào)。這里用到的是trigger方法。

舉個(gè)例子，HTML代碼：

采取摹擬操作的代碼：

$('#btn').bind("click", function(){ $('#test').append("<p>我的綁定函數(shù)1</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數(shù)2</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數(shù)3</p>"); }); $('#btn').trigger("click");

對DOM綁定了單擊事件，采取trigger方法，摹擬了click事件，從而履行了回調(diào)。

這里trigger方法摹擬操作的事件還可以是自定義事件，固然也需要同時(shí)綁定自定義事件。

仍然延續(xù)上例，采取自定義事件代碼實(shí)例：

$('#btn').bind("myClick", function(){ $('#test').append("<p>我的自定義事件.</p>"); }); $('#btn').click(function(){ $(this).trigger("myClick"); });

trigger方法除可以摹擬操作，還可以在第2個(gè)參數(shù)中傳入數(shù)據(jù)，這在MVC框架中，view間傳遞數(shù)據(jù)極為經(jīng)常使用。

$('#btn').bind("myClick", function(event, message1, message2){ $('#test').append( "<p>"+message1 + message2 +"</p>"); }); $('#btn').click(function(){ $(this).trigger("myClick",["我的自定義","事件"]); });

采取triggerHandler方法可以摹擬操作的同時(shí)避免觸發(fā)閱讀器默許操作，具體實(shí)例以下：

html：

<button id="old">trigger</button> <button id="new">triggerHandler</button> <input />

jquery代碼：

$('#old').bind("click", function(){ $("input").trigger("focus"); }); $('#new').bind("click", function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("body").append("<p>focus.</p>"); })

對照可知，后者沒有觸發(fā)閱讀器默許聚焦功能。

（5）綁定多個(gè)事件

綁定多個(gè)事件的方法可采取bind方法，在第1個(gè)參數(shù)中將事件類型空格隔開。

使用案例以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" /> <style> div{ width:100px; height:50px; } .over{ color:red; background:#888; } </style> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div").bind("mouseover mouseout click", function(){ $(this).toggleClass("over"); }); }) </script> </head> <body> <div >滑入.</div> </body> </html>

（6）給綁定事件添加命名空間

命名空間便于管理，當(dāng)元素綁定多個(gè)事件時(shí)，刪除事件只需要指定命名空間，節(jié)省了代碼量。

實(shí)例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" /> <style> div{width:100px;height:50px;background:#888;color:white;} </style> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div").bind("click.plugin",function(){ $("body").append("<p>click事件</p>"); }); $("div").bind("mouseover.plugin", function(){ $("body").append("<p>mouseover事件</p>"); }); $("div").bind("dblclick", function(){ $("body").append("<p>dblclick事件</p>"); }); $("button").click(function() { $("div").unbind(".plugin"); }) /* click,mouseover 事件被刪除， */ }) </script> </head> <body> <div>test.</div> <button >根據(jù)命名空間，刪除事件</button> </body> </html>

3、移除事件

上面提到了綁定事件的各種方法，移除事件主要采取unbind方法，第1個(gè)參數(shù)即移除事件名，第2個(gè)參數(shù)可選為移除回調(diào)函數(shù)。

使用實(shí)例：

$('#btn').bind("click", myFun1 = function(){ $('#test').append("<p>我的綁定函數(shù)1</p>"); }).bind("click", myFun2 = function(){ $('#test').append("<p>我的綁定函數(shù)2</p>"); }).bind("click", myFun3 = function(){ $('#test').append("<p>我的綁定函數(shù)3</p>"); }); $('#delTwo').click(function(){ $('#btn').unbind("click",myFun2);//移除第2個(gè)綁定click函數(shù) });

假設(shè)事件只需履行1次，可以采取one方法進(jìn)行事件綁定，用法類似bind方法。

$('#btn').one("click", function(){ $('#test').append("<p>我的綁定函數(shù)1</p>"); }).one("click", function(){ $('#test').append("<p>我的綁定函數(shù)2</p>"); }).one("click", function(){ $('#test').append("<p>我的綁定函數(shù)3</p>"); });

4、事件對象屬性

事件對象，顧名思義即觸發(fā)事件后，傳入回調(diào)函數(shù)的對象，包括事件類型、事件目標(biāo)、光標(biāo)位置等與事件有關(guān)的屬性。

根據(jù)這些事件對象屬性，便于編寫關(guān)于本事件的各種操作。經(jīng)常使用的避免屢次單擊、避免冒泡、默許操作都采取事件對象屬性實(shí)現(xiàn)。

實(shí)例：

$("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY );//獲得鼠標(biāo)當(dāng)前相對頁面的坐標(biāo) return false;//禁止鏈接跳轉(zhuǎn) });

5、事件冒泡與禁止默許行動(dòng)

（1）事件冒泡

關(guān)于事件冒泡，即觸發(fā)1個(gè)事件，全部事件會(huì)從本層元素向外部包括的元素分散，這樣便可能致使，不希望觸發(fā)的元素被觸發(fā)事件。

實(shí)例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" /> <title>4⑷⑴</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;background: #96E555 } span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;} p {width:200px;background:#888;color:white;height:16px;} </style> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 為span元素綁定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>內(nèi)層span元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); }); // 為div元素綁定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外層div元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); }); // 為body元素綁定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); }); }) </script> </head> <body> <div id="content"> 外層div元素 <span>內(nèi)層span元素</span> 外層div元素 </div> <div id="msg"></div> </body> </html>

解決事件冒泡的方法是在上述案例中，履行事件對象屬性避免對象冒泡方法event.stopPropagation方法。

$('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>內(nèi)層span元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 禁止事件冒泡 }); // 為div元素綁定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外層div元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 禁止事件冒泡 });

（2）禁止閱讀器默許行動(dòng)

這里采取的是事件對象屬性的event.preventDefault方法。

（3）如果既想禁止冒泡行動(dòng)，又需要禁止閱讀器默許行動(dòng)，可以再回調(diào)中返回false，1并履行。

實(shí)例：

$('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>內(nèi)層span元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); return false; });

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生