DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 筆記 事件 浏覽器模型
jquery 筆記 事件 浏覽器模型
編輯:JQuery特效代碼     
浏覽器模型:
1、DOM第0級模型
事件處理程序通過吧函數實例的引用指派到DOM元素的屬性而聲明。這也是我們最常見的,如onclick等
- 代碼如下:
<img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello");}

(1)、其中比較好玩的是Event實例和事件冒泡
Event實例是大多數浏覽器把事件的類實例作為第一個參數傳給函數,但是ie中則是將event指定到window的屬性;在獲取目標元素w3c標准浏覽器存在target,ie則取srcElement屬性,為兼容事件如下寫:
- 代碼如下:
$("img").onclick=function(event){
if(!event) event = window.event;
var target = event.target?event.target:event.srcElement;
}

(2)、事件冒泡
目標元素獲得機會吃力事件,事件模型堅持目標元素的父元素,看是否為同類型建立了處理程序,如果是,則也調用處理程序,直到DOM樹頂部
對於w3c標准浏覽器可使用event的stopPropagation(),對於ie可使用event的cancelBubble取消冒泡

2、第2級模型
解決0級模型中每個屬性存儲事件只能注冊一個處理程序缺陷。
- 代碼如下:
$("img").addEventListener('click',function1,false).addEventListener('click',function2,false);

在2級模型中,事件被觸發,先從DOM樹向下傳播到目標元素(捕捉階段),再向上冒泡,上面的addEventListener第三個參數為false時建立冒泡型處理程序,為ture時建立捕捉型處理程序。
這裡的捕捉型也是第一次聽說,因為ie6和7就不支持第2級模型,所以也難怪,但部分ie浏覽器支持類似冒泡型的有attachEvent(eventName,handler)。

那麼jquery的bind則我們解決了這些。。。
參考《jquery實戰》
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved