jquery 筆記 事件
更新時(shí)間：2011年11月02日 11:06:43 作者：
寫js已經(jīng)有很久了，但是對(duì)js的詳細(xì)了解還是很膚淺的，這幾天在看jquery，在其中有一些新的發(fā)現(xiàn)和體會(huì)，記錄下來
瀏覽器模型：
1、DOM第0級(jí)模型
事件處理程序通過吧函數(shù)實(shí)例的引用指派到DOM元素的屬性而聲明。這也是我們最常見的，如onclick等
<img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello");}
（1）、其中比較好玩的是Event實(shí)例和事件冒泡
Event實(shí)例是大多數(shù)瀏覽器把事件的類實(shí)例作為第一個(gè)參數(shù)傳給函數(shù)，但是ie中則是將event指定到window的屬性；在獲取目標(biāo)元素w3c標(biāo)準(zhǔn)瀏覽器存在target，ie則取srcElement屬性，為兼容事件如下寫：
$("img").onclick=function(event){
if(!event) event = window.event;
var target = event.target?event.target:event.srcElement;
}
（2）、事件冒泡
目標(biāo)元素獲得機(jī)會(huì)吃力事件，事件模型堅(jiān)持目標(biāo)元素的父元素，看是否為同類型建立了處理程序，如果是，則也調(diào)用處理程序，直到DOM樹頂部
對(duì)于w3c標(biāo)準(zhǔn)瀏覽器可使用event的stopPropagation(),對(duì)于ie可使用event的cancelBubble取消冒泡
2、第2級(jí)模型
解決0級(jí)模型中每個(gè)屬性存儲(chǔ)事件只能注冊(cè)一個(gè)處理程序缺陷。
$("img").addEventListener('click',function1,false).addEventListener('click',function2,false);
在2級(jí)模型中，事件被觸發(fā)，先從DOM樹向下傳播到目標(biāo)元素（捕捉階段），再向上冒泡，上面的addEventListener第三個(gè)參數(shù)為false時(shí)建立冒泡型處理程序，為ture時(shí)建立捕捉型處理程序。
這里的捕捉型也是第一次聽說，因?yàn)閕e6和7就不支持第2級(jí)模型，所以也難怪，但部分ie瀏覽器支持類似冒泡型的有attachEvent(eventName,handler)。
那么jquery的bind則我們解決了這些。。。
參考《jquery實(shí)戰(zhàn)》
1、DOM第0級(jí)模型
事件處理程序通過吧函數(shù)實(shí)例的引用指派到DOM元素的屬性而聲明。這也是我們最常見的，如onclick等
復(fù)制代碼 代碼如下:
<img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello");}
（1）、其中比較好玩的是Event實(shí)例和事件冒泡
Event實(shí)例是大多數(shù)瀏覽器把事件的類實(shí)例作為第一個(gè)參數(shù)傳給函數(shù)，但是ie中則是將event指定到window的屬性；在獲取目標(biāo)元素w3c標(biāo)準(zhǔn)瀏覽器存在target，ie則取srcElement屬性，為兼容事件如下寫：
復(fù)制代碼 代碼如下:
$("img").onclick=function(event){
if(!event) event = window.event;
var target = event.target?event.target:event.srcElement;
}
（2）、事件冒泡
目標(biāo)元素獲得機(jī)會(huì)吃力事件，事件模型堅(jiān)持目標(biāo)元素的父元素，看是否為同類型建立了處理程序，如果是，則也調(diào)用處理程序，直到DOM樹頂部
對(duì)于w3c標(biāo)準(zhǔn)瀏覽器可使用event的stopPropagation(),對(duì)于ie可使用event的cancelBubble取消冒泡
2、第2級(jí)模型
解決0級(jí)模型中每個(gè)屬性存儲(chǔ)事件只能注冊(cè)一個(gè)處理程序缺陷。
復(fù)制代碼 代碼如下:
$("img").addEventListener('click',function1,false).addEventListener('click',function2,false);
在2級(jí)模型中，事件被觸發(fā)，先從DOM樹向下傳播到目標(biāo)元素（捕捉階段），再向上冒泡，上面的addEventListener第三個(gè)參數(shù)為false時(shí)建立冒泡型處理程序，為ture時(shí)建立捕捉型處理程序。
這里的捕捉型也是第一次聽說，因?yàn)閕e6和7就不支持第2級(jí)模型，所以也難怪，但部分ie瀏覽器支持類似冒泡型的有attachEvent(eventName,handler)。
那么jquery的bind則我們解決了這些。。。
參考《jquery實(shí)戰(zhàn)》
相關(guān)文章
jquery <li>標(biāo)簽 隔若干行加空白或者加虛線的方法
下面小編就為大家?guī)硪黄猨query <li>標(biāo)簽 隔若干行加空白或者加虛線的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法
這篇文章主要介紹了jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法,結(jié)合實(shí)例形式分析了表格插件jqGrid針對(duì)表格字段屬性相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
jQuery中Chosen三級(jí)聯(lián)動(dòng)功能實(shí)例代碼
Chosen 是一個(gè)JavaScript插件，它能讓丑陋的、很長的select選擇框變的更好看、更方便,不僅如此，它更擴(kuò)大了，增長了主動(dòng)篩選的功能。接下來通過本文給大家分享chosen 三級(jí)聯(lián)動(dòng)功能，一起看看吧2017-03-03
jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)
下面小編就為大家?guī)硪黄猨Query Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
jquery中通過過濾器獲取表單元素的實(shí)現(xiàn)代碼
通過過濾器可以獲取特定的表單元素，如非輸入項(xiàng)目或者單選按鈕的已選項(xiàng)目等元素，可用的2011-07-07
好久沒有溫習(xí)JS了。 最近看到VS2010把Jquery作為JS標(biāo)準(zhǔn)庫納入了Web項(xiàng)目里，再不會(huì)用Jquery，真怕自己“OUT”了。2010-05-05
下面小編就為大家?guī)硪黄斦刯Query中的一些正則匹配表達(dá)式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法，學(xué)習(xí)jquery的朋友可以參考下。2011-04-04
測試代碼如下,本例子中設(shè)置的著色比較多，哈，都是隨便輸些數(shù)字進(jìn)去的，感覺這樣更容易讓大家看到效果，呵，如果我的講的有哪不好麻煩大家多留言教導(dǎo)下^^2009-07-07
jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格checkbox全選的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)與元素遍歷實(shí)現(xiàn)table表格checkbox元素狀態(tài)動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07