JavaScript 學(xué)習(xí)筆記(十五)
更新時(shí)間:2010年01月28日 23:00:48 作者:
事件是DOM(文檔對(duì)象模型)的一部分。事件流就是事件發(fā)生順序,這是IE和其他瀏覽器在事件支持上的主要差別。
事件
事件是DOM(文檔對(duì)象模型)的一部分。事件流就是事件發(fā)生順序,這是IE和其他瀏覽器在事件支持上的主要差別。
一、事件流
1、冒泡型事件
IE上的解決方案就是冒泡型事件,它的基本思想是從最特定的目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。
過程:按照DOM的層次結(jié)構(gòu)像水泡一樣不斷上升至頂端。(從里面的div觸發(fā)事件再到body,到html最后直到document最頂端)。
2、捕獲型事件
可以說(shuō)跟冒泡是正好相反的,事件從最不精確的對(duì)象開始觸發(fā),然后直到最精確。
3、DOM事件流
DOM同時(shí)支持以上兩種事件模型,其中捕獲型事件先發(fā)生,從document對(duì)象開始,最后在document對(duì)象結(jié)束。
二、事件監(jiān)聽函數(shù)
1、IE
每個(gè)函數(shù)和window對(duì)象都有兩個(gè)方法:
attachEvent()方法:附加事件處理函數(shù)
[Object].attachEvent(“事件名”,處理函數(shù)fnHandler);
該方法有兩個(gè)參數(shù)。
var fnClick = function() {
alert("你點(diǎn)擊了ID為div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多個(gè)處理函數(shù)。
detachEvent()方法:分離移除事件處理函數(shù)
2、DOM
addEventListener()方法:分配附加事件處理函數(shù)
[Object]. addEventListener (“事件名”,處理函數(shù)fnHandler,Boolean);
該方法有三個(gè)參數(shù)(“事件名”,“分配的函數(shù)”,處理函數(shù)是冒泡階段還是捕獲階段)
如果事件處理函數(shù)是用于捕獲階段,則第三個(gè)參數(shù)是true,用于冒泡階段則為false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多個(gè)處理函數(shù)。
removeEventListener()方法:移除事件處理函數(shù)
三、事件對(duì)象
包含三個(gè)方面的信息:
1、引起事件的對(duì)象:IE中就是window.event,DOM中是處理函數(shù)的為唯一參數(shù);
2、事件發(fā)生時(shí)的鼠標(biāo)信息;
3、事件發(fā)生時(shí)的鍵盤信息。
IE事件對(duì)象
在IE中,事件對(duì)象是window對(duì)象的一個(gè)屬性event。也就是說(shuō),事件處理函數(shù)必須這樣訪問事件對(duì)象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
盡管是window對(duì)象的屬性,event對(duì)象還是只能在事件發(fā)生時(shí)訪問。所有的事件處理函數(shù)執(zhí)行完畢后銷毀。
DOM標(biāo)準(zhǔn)的事件對(duì)象
event對(duì)象必須作為唯一的參數(shù)傳給事件處理函數(shù)。所以,在DOM兼容的瀏覽器(如Mozilla,Safari和Opera)中訪問事件對(duì)象,要這么做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以這樣
oDiv.onclick = function(oEvent) {
//.....
}
事件是DOM(文檔對(duì)象模型)的一部分。事件流就是事件發(fā)生順序,這是IE和其他瀏覽器在事件支持上的主要差別。
一、事件流
1、冒泡型事件
IE上的解決方案就是冒泡型事件,它的基本思想是從最特定的目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。
過程:按照DOM的層次結(jié)構(gòu)像水泡一樣不斷上升至頂端。(從里面的div觸發(fā)事件再到body,到html最后直到document最頂端)。
2、捕獲型事件
可以說(shuō)跟冒泡是正好相反的,事件從最不精確的對(duì)象開始觸發(fā),然后直到最精確。
3、DOM事件流
DOM同時(shí)支持以上兩種事件模型,其中捕獲型事件先發(fā)生,從document對(duì)象開始,最后在document對(duì)象結(jié)束。
二、事件監(jiān)聽函數(shù)
1、IE
每個(gè)函數(shù)和window對(duì)象都有兩個(gè)方法:
attachEvent()方法:附加事件處理函數(shù)
[Object].attachEvent(“事件名”,處理函數(shù)fnHandler);
該方法有兩個(gè)參數(shù)。
var fnClick = function() {
alert("你點(diǎn)擊了ID為div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多個(gè)處理函數(shù)。
detachEvent()方法:分離移除事件處理函數(shù)
2、DOM
addEventListener()方法:分配附加事件處理函數(shù)
[Object]. addEventListener (“事件名”,處理函數(shù)fnHandler,Boolean);
該方法有三個(gè)參數(shù)(“事件名”,“分配的函數(shù)”,處理函數(shù)是冒泡階段還是捕獲階段)
如果事件處理函數(shù)是用于捕獲階段,則第三個(gè)參數(shù)是true,用于冒泡階段則為false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多個(gè)處理函數(shù)。
removeEventListener()方法:移除事件處理函數(shù)
三、事件對(duì)象
包含三個(gè)方面的信息:
1、引起事件的對(duì)象:IE中就是window.event,DOM中是處理函數(shù)的為唯一參數(shù);
2、事件發(fā)生時(shí)的鼠標(biāo)信息;
3、事件發(fā)生時(shí)的鍵盤信息。
IE事件對(duì)象
在IE中,事件對(duì)象是window對(duì)象的一個(gè)屬性event。也就是說(shuō),事件處理函數(shù)必須這樣訪問事件對(duì)象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
盡管是window對(duì)象的屬性,event對(duì)象還是只能在事件發(fā)生時(shí)訪問。所有的事件處理函數(shù)執(zhí)行完畢后銷毀。
DOM標(biāo)準(zhǔn)的事件對(duì)象
event對(duì)象必須作為唯一的參數(shù)傳給事件處理函數(shù)。所以,在DOM兼容的瀏覽器(如Mozilla,Safari和Opera)中訪問事件對(duì)象,要這么做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以這樣
oDiv.onclick = function(oEvent) {
//.....
}
相關(guān)文章
javascript基礎(chǔ)語(yǔ)法——全面理解變量和標(biāo)識(shí)符
下面小編就為大家?guī)?lái)一篇javascript基礎(chǔ)語(yǔ)法——全面理解變量和標(biāo)識(shí)符。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考,一起跟隨小編過來(lái)看看吧2016-06-06
Javascript操作dom對(duì)象之select全面解析
下面小編就為大家?guī)?lái)一篇Javascript操作dom對(duì)象之select全面解析。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-04-04
JavaScript中用toString()方法返回時(shí)間為字符串
這篇文章主要介紹了JavaScript中用toString()方法返回時(shí)間為字符串的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
Javascript學(xué)習(xí)筆記之函數(shù)篇(四):arguments 對(duì)象
JavaScript中arguments函數(shù)對(duì)象是該對(duì)象代表正在執(zhí)行的函數(shù)和調(diào)用它的函數(shù)的參數(shù)。JavaScript 函數(shù)中 arguments 為特殊對(duì)象,無(wú)需明確指出參數(shù)名,就能訪問它們。2014-11-11
parentElement,srcElement的使用小結(jié)
本篇文章主要是對(duì)parentElement,srcElement的使用進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
Javascript核心讀書有感之詞法結(jié)構(gòu)
這篇文章主要介紹了Javascript核心讀書有感之詞法結(jié)構(gòu),需要的朋友可以參考下2015-02-02

