服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.
本篇文章是至今為止本系列內(nèi)容最多的一篇, 足以可見(jiàn)其重要性. 大家反映要多列舉示例. 我會(huì)在時(shí)間允許的情況下盡量多列舉示例. 真正的投入生產(chǎn)使用的實(shí)例暫時(shí)還無(wú)法加入到文章中, 但是可能最后我會(huì)列舉一些作品供大家借鑒. 另外本人水平有限, 因?yàn)槲也皇荱I設(shè)計(jì)師. 文章可能有錯(cuò)誤的地方, 希望大家?guī)兔χ赋? 一起學(xué)習(xí)一起進(jìn)步. 在技術(shù)的世界里我們是沒(méi)有任何利益瓜葛. 希望大家都抱著彼此鼓勵(lì)的心態(tài), 對(duì)于回復(fù)中的激進(jìn)評(píng)論我也都會(huì)考慮, 但是希望能夠彼此尊重, 保護(hù)博客園這片程序員的凈土!
曾經(jīng)在我的 "Javascript公共腳本庫(kù)系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫(kù)系列(三): 格式化事件對(duì)象/事件對(duì)象詳解" 兩篇文章中, 曾講解過(guò)javascript中的事件和事件對(duì)象.
首先看一下我們經(jīng)常使用的添加事件的方式:
<!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>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屬性.
在上一章中已經(jīng)說(shuō)明了什么是元素屬性, 什么是Dom屬性.這兩種方式的效果相同. 當(dāng)單擊div時(shí)會(huì)顯示提示框.
請(qǐng)注意, 雖然效果相同, 但是并不等效.
document.getElementById("testDiv2").onclick = showMsg;
等效于:
<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>
注意兩者的區(qū)別了嗎? 我們常用的修改元素屬性添加事件的方式, 實(shí)際上是建立了一個(gè)匿名函數(shù):
document.getElementById("testDiv1").onclick = function(event) { alert("!!!"); };
