萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 從零開始學習jQuery (五) 事件與事件對象
從零開始學習jQuery (五) 事件與事件對象
一.摘要
事件是腳本編程的靈魂. 所以本章內容也是jQuery學習的重點. 本文將對jQuery中的事件處理以及事件對象進行詳細的講解.
二.前言
本篇文章是至今為止本系列內容最多的一篇, 足以可見其重要性. 大家反映要多列舉示例. 我會在時間允許的情況下盡量多列舉示例. 真正的投入生產使用的實例暫時還無法加入到文章中, 但是可能最後我會列舉一些作品供大家借鑒. 另外本人水平有限, 因為我不是UI設計師. 文章可能有錯誤的地方, 希望大家幫忙指出, 一起學習一起進步. 在技術的世界裡我們是沒有任何利益瓜葛. 希望大家都抱著彼此鼓勵的心態, 對於回復中的激進評論我也都會考慮, 但是希望能夠彼此尊重, 保護博客園這片程序員的淨土!
三.事件與事件對象
曾經在我的 "Javascript公共腳本庫系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫系列(三): 格式化事件對象/事件對象詳解" 兩篇文章中, 曾講解過javascript中的事件和事件對象.
首先看一下我們經常使用的添加事件的方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript中的事件</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
document.getElementById("testDiv2").onclick = showMsg;
})
function showMsg(event)
{
alert("!!!");
}
</script>
</head>
<body>
<div id="testDiv1" onclick="showMsg();">單擊事件 1</div>
<div id="testDiv2">單擊事件 2</div>
</body>
</html>
我們最常使用為元素添加onclick元素屬性的方式添加事件.
為testDiv2的添加onclick事件的方式是修改Dom屬性.
在上一章中已經說明了什麼是元素屬性, 什麼是Dom屬性.這兩種方式的效果相同. 當單擊div時會顯示提示框.
請注意, 雖然效果相同, 但是並不等效.
等效於:
document.getElementById("testDiv2").onclick = showMsg;
<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>
注意兩者的區別了嗎? 我們常用的修改元素屬性添加事件的方式, 實際上是建立了一個匿名函數:
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};
這個匿名函數的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.
這種方式的弊端是:
1. 只能為一個事件綁定一個事件處理函數. 使用"="賦值會把前面為此時間綁定的所有事件處理函數沖掉.
2. 在事件函數(無論是匿名函數還是綁定的函數)中獲取事件對象的方式在不同浏覽器中要特殊處理:
IE中,事件對象是window對象的一個屬性.事件處理函數必須這樣訪問事件對象:
obj.onclick=function()
{
var oEvent = window.event;
}
在DOM標准中,事件對象必須作為唯一參數傳給事件處理函數:
obj.onclick=function()
{
var oEvent = arguments[0];
}
除了使用argument[0]訪問此參數, 我們也可以指定參數名稱,上面的代碼等同於:
obj.onclick=function(oEvent)
{
}
目前兼容DOM的浏覽器有Firefox,Safari,Opera,IE7等.
3. 添加多播委托的函數在不同浏覽器中是不一樣的.
下面是在"Javascript公共腳本庫系列(二): 添加事件多播委托的方法"文章中, 提供的兼容多浏覽器添加多播委托的方法:
//統一的為對象添加多播事件委托的方法
/*
參數說明:
oTarget : 要添加事件的對象.比如"document".
sEventType : 事件類型.比如單擊事件"click".
fnHandler : 發生事件時調用的方法. 比如一個靜態函數"hideCalendar"
使用舉例:
//單擊頁面的任何元素,只要沒有取消冒泡,都可以關閉日歷控件
var cf = document.getElementById("CalFrame");
if( cf != null && hideCalendar != null )
{
ScriptHelper.addEventListener( document, "click", hideCalendar );
}
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
if( oTarget.addEventListener )//for dom
{
oTarget.addEventListener( sEventType, fnHandler, false )
}
else if( oTarget.attachEvent )//for ie
{
oTarget.attachEvent( "on" + sEventType, fnHandler);
}
}
所以我們首先應該摒棄<div onclick="..."></div>這種通過修改元素屬性添加事件的方式. 盡量使用添加多播事件委托的方式為一個事件綁定多個事件處理函數, 比如為document對象的單擊事件添加一個關閉彈出層的方法, 使用多播就不會影響document對象原有的事件處理函數.
四. jQuery中的事件
有了jQuery, 我們有了處理對象事件的一系列函數. 上面基礎知識還是要懂, 但是再也不用自己去實現處理多播事件委托的函數了. 正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:
$("#testDiv4").bind("click", showMsg);
我們為id是testDiv4的元素, 添加列click事件的事件處理函數showMsg.
使用jQuery事件處理函數的好處:
1. 添加的是多播事件委托. 也就是為click事件又添加了一個方法, 不會覆蓋對象的click事件原有的事件處理函數.
單擊testDiv4對象時, 依次提示"one"和"two".
$("#testDiv4").bind("click", function(event) { alert("one"); });
$("#testDiv4").bind("click", function(event) { alert("two"); });
2. 統一了事件名稱.
添加多播事件委托時, ie中是事件名稱前面有"on". 但是使用bind()函數我們不用區分ie和dom , 因為內部jQuery已經幫我們統一了事件的名稱.
3. 可以將對象行為全部用腳本控制.
