前端編程提高之旅（十五）----jquery事件
來源：程序員人生 發布時間：2014-12-22 08:18:25 閱讀次數：4646次
HTML與js交互主要通過用戶與閱讀器操作頁面時引發事件。文檔或某些元素產生某些變化或操作時，閱讀器會生成事件。jquery增加了事件處理能力。
jquery事件部份可以從以下5部份理解：
1、加載DOM函數
這里指的以下方法：
$(document).ready(function(){
})
相比于傳統的window.onload方法，前者在履行時機與可否屢次使用上區分于后者。
前者是在DOM完全就緒回調就會被調用，后者則是網頁所有元素（包括關聯文件）完全加載到閱讀器后才會被調用。這里常見利用場景是，當需要對圖片進行操作時，需要采取后者，由于后者才能保證圖片文件被加載完成履行。
前者可以屢次使用，而后者只能使用1次，即使屢次定義，后定義的函數會將之前定義的函數覆蓋掉。
2、各種事件綁定的方法
(1）1般綁定方法：bind方法
bind方法參數分別定義事件類型、回調函數。
構建1個實例，HTML以下：
<div id="panel">
<h5 class="head">甚么是jQuery?</h5>
<div class="content">
jQuery是繼Prototype以后又1個優秀的JavaScript庫，它是1個由 John Resig 創建于2006年1月的開源項目。jQuery憑仗簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、履行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
</div>
</div>
bind使用代碼以下：
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
需要注意的是，回調函數內，this指的是帶有相應行動的DOM元素，如需使用jquery中方法，徐將其轉化為Jquery對象$(this)情勢。
（2）在bind基礎上，簡寫綁定方法
簡寫的綁定方法，方法名代表事件類型，參數為回調函數。
仍然延續上例，簡寫方法使用以下：
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
（3）合成事件
這里合成事件有兩個hover方法與toggle方法。
hover方法用于摹擬鼠標懸停事件，有兩個回調函數作為參數，第1個回調代表光標移入履行，第2個回調代表光標移出履行。
沿用上例，使用方法以下：
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
toggle方法用于摹擬鼠標連續單擊行動，參數為多個回調，每一個回調會根據單擊次序順序循環履行。
不過這個方法在jquery1.9版本已被刪除，這里其實不多做討論。
（4）摹擬操作
摹擬的是操作，也即是交互行動，從而引發事件，履行回調。這里用到的是trigger方法。
舉個例子，HTML代碼：
<button id="btn">點擊我</button>
<div id="test"></div>
采取摹擬操作的代碼：
$('#btn').bind("click", function(){
$('#test').append("<p>我的綁定函數1</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數2</p>");
}).bind("click", function(){
$('#test').append("<p>我的綁定函數3</p>");
});
$('#btn').trigger("click");
對DOM綁定了單擊事件，采取trigger方法，摹擬了click事件，從而履行了回調。
這里trigger方法摹擬操作的事件還可以是自定義事件，固然也需要同時綁定自定義事件。
仍然延續上例，采取自定義事件代碼實例：
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定義事件.</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick");
});
trigger方法除可以摹擬操作，還可以在第2個參數中傳入數據，這在MVC框架中，view間傳遞數據極為經常使用。
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定義","事件"]);
});
采取triggerHandler方法可以摹擬操作的同時避免觸發閱讀器默許操作，具體實例以下：
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>");
})
對照可知，后者沒有觸發閱讀器默許聚焦功能。
（5）綁定多個事件
綁定多個事件的方法可采取bind方法，在第1個參數中將事件類型空格隔開。
使用案例以下：
<!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>
命名空間便于管理，當元素綁定多個事件時，刪除事件只需要指定命名空間，節省了代碼量。
實例：
<!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 >根據命名空間，刪除事件</button>
</body>
</html>
上面提到了綁定事件的各種方法，移除事件主要采取unbind方法，第1個參數即移除事件名，第2個參數可選為移除回調函數。
使用實例：
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的綁定函數1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的綁定函數2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的綁定函數3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);//移除第2個綁定click函數
});
假設事件只需履行1次，可以采取one方法進行事件綁定，用法類似bind方法。
$('#btn').one("click", function(){
$('#test').append("<p>我的綁定函數1</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數2</p>");
}).one("click", function(){
$('#test').append("<p>我的綁定函數3</p>");
});
4、事件對象屬性
事件對象，顧名思義即觸發事件后，傳入回調函數的對象，包括事件類型、事件目標、光標位置等與事件有關的屬性。
根據這些事件對象屬性，便于編寫關于本事件的各種操作。經常使用的避免屢次單擊、避免冒泡、默許操作都采取事件對象屬性實現。
實例：
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//獲得鼠標當前相對頁面的坐標
return false;//禁止鏈接跳轉
});
5、事件冒泡與禁止默許行動
（1）事件冒泡
關于事件冒泡，即觸發1個事件，全部事件會從本層元素向外部包括的元素分散，這樣便可能致使，不希望觸發的元素被觸發事件。
實例：
<!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>內層span元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為div元素綁定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>
</html>
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 禁止事件冒泡
});
// 為div元素綁定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 禁止事件冒泡
});
（2）禁止閱讀器默許行動
這里采取的是事件對象屬性的event.preventDefault方法。
（3）如果既想禁止冒泡行動，又需要禁止閱讀器默許行動，可以再回調中返回false，1并履行。
實例：
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
return false;
});
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
