在之前dom操作中提到了javascript對事件處理的介紹。由於不同浏覽器處理事件各不相相同,這給開發者帶來了不必要的麻煩,jQuery的方便的解決了這個方面的麻煩。
1.綁定事件監聽
(http://www.cnblogs.com/article/60096.htm)對事件的監聽做了詳細的介紹,看到了iE和DOM標准浏覽器對待事件監聽的區別,並對多個監聽事件執行順序和方式也不相同。
在jQuery中,通過bind()對事件綁定,相當於IE浏覽器的attachEvent()和標准DOM的addEventListener()。如下例子:
代碼如下:
<script type="text/javascript">
$(function() {
$("img")
.bind("click", function() {
$("#show").append("<div>點擊事件1</div>");
})
.bind("click", function() {
$("#show").append("<div>點擊事件2</div>");
})
.bind("click", function() {
$("#show").append("<div>點擊事件3</div>");
});
});
</script>
<img src="11.jpg">
<div id="show"></div>
以上代碼對img綁定了三個click監聽事件.
bind()通用語法為
bind(eventType,[data],Listener)
其中,eventType為事件的類型,可以是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error
data為可選參數,用來傳遞一些特殊的數據供監聽函數使用。而listener為事件監聽函數,上面的例子中使用匿名函數
對於多個事件類型,如果希望使用同一個監聽函數,可以同事添加在eventType中,事件之間使用空格分離。
代碼如下:
$(function() {
$("p").bind("mouseenter mouseleave", function() {
$(this).toggleClass("over")
})
});
另外一些特殊的事件類型可以直接利用事件名稱作為綁定函數,接受參數為監聽函數。例如之前反復使用的
代碼如下:
$("p").click(function(){
//添加click事件監聽函數
})
其中,通用語法為
eventTypeName(fn)
可以使用的eventTypeName包括
blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
keydown/keypress/keyup/error等
除了bind()外,jQuery還提供了一個很實用的one()方法來綁定事件。該方法綁定回見出發了一次後就會自動刪除,不再生效。
代碼如下:
//首先創建10個<div>塊
for (var i = 0; i < 10; i++)
$(document.body).append($("<div>Click<br>Me!</div>"));
var iCounter = 1;
//每個都用one添加click事件
$("div").one("click", function() {
$(this).css({
background: "#8f0000",
color: "#FFFFFF"
}).html("Clicked!<br>" + (iCounter++));
});
例如上例,創建10個div,給每個div綁定一個函數事件,當點擊div塊時,函數執行一次便不再執行。
2.移除事件監聽
jQuery采用unbind()來移除事件,該方法可以接受兩個可選函數,也可不設置任何參數,例如下面的代碼表示移除div標記的所有事件和P標記的所有click事件。
代碼如下:
$("p").unbind("click");
$("div").unbind();
如果希望移除某個指定的事件,則必須使用unbind(eventType,listener)方法的第二個參數,例如:
代碼如下:
var myFunc = function() {
//監聽函數體
};
$("p").bind("click",myFunc);
$("p").unbind("click",myFunc);
例如以下代碼
代碼如下:
<script type="text/javascript">
$(function() {
var fnMyFunc1; //函數變量
$("img")
.bind("click", fnMyFunc1 = function() { //賦給函數變量
$("#show").append("<div>點擊事件1</div>");
})
.bind("click", function() {
$("#show").append("<div>點擊事件2</div>");
})
.bind("click", function() {
$("#show").append("<div>點擊事件3</div>");
});
$("input[type=button]").click(function() {
$("img").unbind("click", fnMyFunc1); //移除事件監聽myFunc1
});
});
</script>
<img src="11.jpg">
<input type="button" value="移除事件1">
<div id="show"></div>
例如以上代碼,添加了fnMyFunc1函數bind()綁定時將匿名函數賦值給他,從而作為unbind()函數調用名稱。
3.傳遞事件對象。
http://www.cnblogs.com/article/60096.htm介紹了對象的概念,並且分析了事件對象常用的屬性和方法,可以看到事件對象在不同的浏覽器之間存在很多區別,jQuery中沒時間對象是通過唯一的方法傳遞給事件監聽函數的。
代碼如下:
<script type="text/javascript">
$(function() {
$("p").bind("click", function(e) { //傳遞事件對象e
var sPosPage = "(" + e.pageX + "," + e.pageY + ")";
var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";
$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);
});
});
</script>
<p>點擊此處</p>
<span id=""></span>
以上的代碼給p綁定了鼠標click事件監聽函數,並將事件對象作為參數傳遞,從而獲取了鼠標事件觸發點的坐標值。
對於事件的屬性和方法,jQuery最重要的工作就是替開發者解決了兼容性問題,常用的屬性和方法
屬性 說明
altKey 按下alt鍵為ture,否則為false
ctrlKey 按下ctrl鍵為ture,否則為false
shiftKey 按下shift鍵為ture,否則為false
keyCode 對於keyup和keydown事件,返回按鍵的值(即a和A的值是一樣的,都是65)
pageX,pageY 鼠標在客戶端的位置,不包括工具欄,滾動條等
relateTarget
鼠標事件中,鼠標指針進入或離開元素。
screenX,screenY 鼠標在整個屏幕的位置。
target 引起事件的元素/對象
type 事件的名稱,如click,mouseover等
which 鍵盤事件中為按鍵的unicode值,鼠標按鍵中代表鼠標按鍵(1左鍵 2中鍵 3為右鍵)
stopPropagation() 阻止事件向上冒泡。
preventDefault() 阻止事件默認行為
以上即是本文的全部內容了,講解的非常詳細,希望大家能夠喜歡。