事件類型
-
Web 瀏覽器中可能發(fā)生的事件有很多類型
- UI事件：當(dāng)用戶與界面上的元素交互時觸發(fā)。
- 焦點事件：當(dāng)元素獲得或失去焦點時觸發(fā)。
- 滾輪事件：當(dāng)使用鼠標(biāo)滾輪時觸發(fā)茎杂。
- 文本事件：當(dāng)在文檔中輸入文本時觸發(fā)起便。
- 鍵盤事件：但用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)。
- 合成事件：當(dāng)為輸入法編輯器輸入字符時觸發(fā)酥宴。
- 變動事件：當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)。
//事件處理程序
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function(event){
return event ? event : window.event;
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
1您觉、UI事件
- UI 事件指的是那些不一定與用戶操作有關(guān)的事件拙寡。
(1)load事件
- load在當(dāng)頁面完全加載后在window上面觸發(fā)，當(dāng)所有框架都加載完畢時在框架集上面觸發(fā)琳水，當(dāng)圖像加載完畢時在<img>元素上面觸發(fā)肆糕，或者當(dāng)嵌入的內(nèi)容加載完畢時在<object>元素上面觸發(fā)。
//第一種定義onload 事件處理程序的方式
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
<!--第二種指定onload 事件處理程序的方式-->
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="alert('Loaded!')">
</body>
</html>
(2)unload事件
- unload在孝，當(dāng)頁面完全卸載后在window上面觸發(fā)诚啃，當(dāng)所有框架都卸載后在框架集上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容卸載完畢后在<object>元素上面觸發(fā)私沮。
- 只要用戶從一個頁面切換到另一個頁面绍申，就會發(fā)生unload事件。而利用這個事件最多的情況是清除引用顾彰，以避免內(nèi)存泄漏极阅。
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
</head>
<body onunload="alert('Unloaded!')">
</body>
</html>
(3)resize事件
- resize|當(dāng)窗口或框架的大小變化時在window 或框架上面觸發(fā)。
- 瀏覽器窗口最小化或最大化時也會觸發(fā)resize 事件涨享。
EventUtil.addHandler(window, "resize", function(event){
alert("Resized");
});
(4)scroll事件
- scroll筋搏，當(dāng)用戶滾動帶滾動條的元素中的內(nèi)容時，在該元素上面觸發(fā)厕隧。<body>元素中包含所加載頁面的滾動條奔脐。
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
(5)abort
- abort俄周，在用戶停止下載過程時，如果嵌入的內(nèi)容沒有加載完髓迎，則在<object>元素上面觸發(fā)峦朗。
(6)error
- error，當(dāng)發(fā)生JavaScript錯誤時在window上面觸發(fā)排龄，當(dāng)無法加載圖像時在<img>元素上面觸發(fā)波势，當(dāng)無法加載嵌入內(nèi)容時在<object>元素上面觸發(fā)，或者當(dāng)有一或多個框架無法加載時在框架集上面觸發(fā)
(7)select
- select橄维，當(dāng)用戶選擇文本框（<input>或<texterea>）中的一或多個字符時觸發(fā)尺铣。
2、焦點事件
-
焦點事件會在頁面元素獲得或失去焦點時觸發(fā)争舞，有以下6 個焦點事件凛忿。
- blur：在元素失去焦點時觸發(fā)。這個事件不會冒泡竞川；所有瀏覽器都支持它店溢。
- focus：在元素獲得焦點時觸發(fā)。這個事件不會冒泡委乌；所有瀏覽器都支持它逞怨。
- focusin：在元素獲得焦點時觸發(fā)。這個事件與HTML 事件focus 等價福澡，但它冒泡。
- focusout：在元素失去焦點時觸發(fā)驹马。這個事件是HTML 事件blur 的通用版本革砸。
當(dāng)焦點從頁面中的一個元素移動到另一個元素，會依次觸發(fā)下列事件：
(1) focusout 在失去焦點的元素上觸發(fā)糯累；
(2) focusin 在獲得焦點的元素上觸發(fā)算利；
(3) blur 在失去焦點的元素上觸發(fā)；
(4) DOMFocusOut 在失去焦點的元素上觸發(fā)泳姐；
(5) focus 在獲得焦點的元素上觸發(fā)效拭；
(6) DOMFocusIn 在獲得焦點的元素上觸發(fā)。
其中胖秒，blur缎患、DOMFocusOut和focusout的事件目標(biāo)是失去焦點的元素；而focus阎肝、DOMFocusIn和focusin 的事件目標(biāo)是獲得焦點的元素挤渔。要確定瀏覽器是否支持這些事件，可以使用如下代碼：
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
3风题、鼠標(biāo)與滾輪事件
- click：在用戶單擊主鼠標(biāo)按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發(fā)判导。
- dblclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左邊的按鈕）時觸發(fā)嫉父。
- mousedown：在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件眼刃。
- mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)绕辖。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)擂红。
- mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā)仪际。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)篮条。
- mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重復(fù)地觸發(fā)弟头。不能通過鍵盤觸發(fā)這個事件。
- mouseout：在鼠標(biāo)指針位于一個元素上方涉茧，然后用戶將其移入另一個元素時觸發(fā)赴恨。
- mouseover：在鼠標(biāo)指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)伴栓。不能通過鍵盤觸發(fā)這個事件伦连。
- mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件钳垮。
- 要檢測瀏覽器是否支持上面的所有事件惑淳，可以使用以下代碼：
var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
- 鼠標(biāo)事件中還有一類滾輪事件。而說是一類事件饺窿，其實就是一個mousewheel 事件歧焦。這個事件跟蹤鼠標(biāo)滾輪。
(1)客戶區(qū)坐標(biāo)位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
(2)頁面坐標(biāo)位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Page coordinates: " + event.pageX + "," + event.pageY);
});
- IE8 及更早版本不支持事件對象上的頁面坐標(biāo)肚医，不過使用客戶區(qū)坐標(biāo)和滾動信息可以計算出來绢馍。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});
(3)屏幕坐標(biāo)位置
- 通過screenX 和screenY屬性可以確定鼠標(biāo)事件發(fā)生時鼠標(biāo)指針相對于整個屏幕的坐標(biāo)信息。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
(4)修改鍵
- 在按下鼠標(biāo)時鍵盤上的某些鍵的狀態(tài)也可以影響到所要采取的操作肠套。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
(5)相關(guān)元素
- 在發(fā)生mouseover 和mouserout 事件時舰涌，還會涉及更多的元素。
- 對mouseover 事件而言你稚，事件的主目標(biāo)是獲得光標(biāo)的元素瓷耙，而相關(guān)元素就是那個失去光標(biāo)的元素。
- 對mouseout 事件而言刁赖，事件的主目標(biāo)是失去光標(biāo)的元素搁痛，而相關(guān)元素則是獲得光標(biāo)的元素。
- DOM通過event 對象的relatedTarget 屬性提供了相關(guān)元素的信息宇弛。
- IE8及之前版本不支持relatedTarget屬性落追，但提供了保存著同樣信息的不同屬性。在mouseover 事件觸發(fā)時涯肩，IE 的fromElement屬性中保存了相關(guān)元素轿钠；在mouseout事件觸發(fā)時巢钓，IE 的toElement 屬性中保存著相關(guān)元素。
<!DOCTYPE html>
<html>
<head>
<title>Related Elements Example</title>
</head>
<body>
<div id="myDiv" style="background-color:red;">test</div>
</body>
</html>
var EventUtil = {
//省略了其他代碼
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
//省略了其他代碼
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});
(6)鼠標(biāo)按鈕
- DOM的button 屬性可能有如下3 個值：
- 0 表示主鼠標(biāo)按鈕疗垛。
- 1 表示中間的鼠標(biāo)按鈕（鼠標(biāo)滾輪按鈕）症汹。
- 2 表示次鼠標(biāo)按鈕。
- 在常規(guī)的設(shè)置中贷腕，主鼠標(biāo)按鈕就是鼠標(biāo)左鍵背镇，而次鼠標(biāo)按鈕就是鼠標(biāo)右鍵。
- IE8 及之前版本也提供了button 屬性泽裳，但這個屬性的值與DOM的button屬性有很大差異瞒斩。
- 0：表示沒有按下按鈕。
- 1：表示按下了主鼠標(biāo)按鈕涮总。
- 2：表示按下了次鼠標(biāo)按鈕胸囱。
- 3：表示同時按下了主、次鼠標(biāo)按鈕瀑梗。
- 4：表示按下了中間的鼠標(biāo)按鈕烹笔。
- 5：表示同時按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。
- 6：表示同時按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕抛丽。
- 7：表示同時按下了三個鼠標(biāo)按鈕谤职。
var EventUtil = {
//省略了其他代碼
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//省略了其他代碼
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getButton(event));
});
(7)鼠標(biāo)滾輪事件
- 與mousewheel 事件對應(yīng)的event對象除包含鼠標(biāo)事件的所有標(biāo)準(zhǔn)信息外，還包含一個特殊的wheelDelta 屬性亿鲜。
- 當(dāng)用戶向前滾動鼠標(biāo)滾輪時允蜈，wheelDelta是120的倍數(shù)；當(dāng)用戶向后滾動鼠標(biāo)滾輪時蒿柳，wheelDelta 是-120 的倍數(shù)饶套。
EventUtil.addHandler(document, "mousewheel", function(event){
event = EventUtil.getEvent(event);
alert(event.wheelDelta);
});
(8)觸摸設(shè)備
- 不支持dblclick事件，雙擊瀏覽器窗口放大畫面其馏。
- 輕擊可單擊元素會觸發(fā)mousemove 事件。
- mousemove 事件也會觸發(fā)mouseover 和mouseout 事件爆安。
- 兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發(fā)mousewheel 和scroll 事件叛复。
4、鍵盤與文本事件
- keydown: 當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā)扔仓，若按住不放褐奥，會重復(fù)觸發(fā)。
- keypress:當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā)翘簇，若按住不放撬码，會重復(fù)觸發(fā)。按下ESC鍵也會觸發(fā)這個事件版保。
- keyup：當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)呜笑。
(1)鍵碼
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
(2)字符編碼
- IE9夫否、Firefox、Chrome 和Safari 的event 對象都支持一個charCode 屬性叫胁，這個屬性只有在發(fā)生keypress事件時才包含值凰慈，而且這個值是按下的那個鍵所代表字符的ASCII 編碼。此時的keyCode通常等于0 或者也可能等于所按鍵的鍵碼驼鹅。
//跨瀏覽器取得字符編碼
var EventUtil = {
//省略的代碼
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
//省略的代碼
};
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getCharCode(event));
});
(3)DOM3級變化
- DOM3級事件中的鍵盤事件微谓，不再包含charCode 屬性，而是包含兩個新屬性：key和char输钩。
- 在按下某個字符鍵時豺型，key的值就是相應(yīng)的文本字符（如“k”或“M”）；在按下非字符鍵時买乃， key 的值是相應(yīng)鍵的名（如“Shift”或“Down”）姻氨。
- char 屬性在按下字符鍵時的行為與key 相同，但在按下非字符鍵時值為null为牍。
- IE9 支持key 屬性哼绑，但不支持char 屬性。Safari 5 和Chrome 支持名為keyIdentifier 的屬性碉咆，在按下非字符鍵（例如Shift）的情況下與key的值相同抖韩。
- 對于字符鍵，keyIdentifier 返回一個格式類似“U+0000”的字符串疫铜，表示Unicode 值茂浮。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var identifier = event.key || event.keyIdentifier;
if (identifier){
alert(identifi er);
}
});
- 由于存在跨瀏覽器問題，因此不推薦使用key壳咕、keyIdentifier 或char席揽。
(4)textInput事件
- 當(dāng)用戶在可編輯區(qū)域中輸入字符時，就會觸發(fā)textInput事件谓厘。
- 這個用于替代keypress 的textInput 事件的行為稍有不同幌羞。
- 任何可以獲得焦點的元素都可以觸發(fā)keypress事件，但只有可編輯區(qū)域才能觸發(fā)textInput事件竟稳。
- textInput 事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發(fā)属桦，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發(fā)。
- 由于textInput 事件主要考慮的是字符他爸，因此它的event對象中還包含一個data屬性聂宾，這個屬性的值就是用戶輸入的字符（而非字符編碼）。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
5诊笤、復(fù)合事件
- 復(fù)合事件系谐，用于處理IME 的輸入序列。
- IME（Input Method Editor讨跟，輸入法編輯器）可以讓用戶輸入在物理鍵盤上找不到的字符纪他。
- 復(fù)合事件就是針對檢測和處理這種輸入而設(shè)計的鄙煤。有以下三種復(fù)合事件。
- compositionstart：在IME 的文本復(fù)合系統(tǒng)打開時觸發(fā)止喷，表示要開始輸入了馆类。
- compositionupdate：在向輸入字段中插入新字符時觸發(fā)。
- compositionend：在IME 的文本復(fù)合系統(tǒng)關(guān)閉時觸發(fā)弹谁，表示返回正常鍵盤輸入狀態(tài)乾巧。
- 在觸發(fā)復(fù)合事件時，目標(biāo)是接收文本的輸入字段预愤。但它比文本事件的事件對象多一個屬性data沟于，其中包含以下幾個值中的一個。
- 如果在compositionstart事件發(fā)生時訪問植康，包含正在編輯的文本旷太；
- 如果在compositionupdate 事件發(fā)生時訪問，包含正插入的新字符销睁；
- 如果在compositionend 事件發(fā)生時訪問供璧，包含此次輸入會話中插入的所有字符。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "compositionstart", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox, "compositionupdate", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox, "compositionend", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
- 要確定瀏覽器是否支持復(fù)合事件冻记，可以使用以下代碼
var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0");
6睡毒、變動事件
- DOMSubtreeModified：在DOM 結(jié)構(gòu)中發(fā)生任何變化時觸發(fā)。這個事件在其他任何事件觸發(fā)
后都會觸發(fā)冗栗。 - DOMNodeInserted：在一個節(jié)點作為子節(jié)點被插入到另一個節(jié)點中時觸發(fā)演顾。
- DOMNodeRemoved：在節(jié)點從其父節(jié)點中被移除時觸發(fā)。
- DOMNodeInsertedIntoDocument：在一個節(jié)點被直接插入文檔或通過子樹間接插入文檔之后觸發(fā)隅居。這個事件在DOMNodeInserted 之后觸發(fā)钠至。
- DOMNodeRemovedFromDocument：在一個節(jié)點被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發(fā)。這個事件在DOMNodeRemoved 之后觸發(fā)胎源。
- DOMAttrModified：在特性被修改之后觸發(fā)棉钧。
- DOMCharacterDataModified：在文本節(jié)點的值發(fā)生變化時觸發(fā)。
<! DOCTYPE html>
<html>
<head>
<title>Node Removal Events Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
(1)刪除節(jié)點
//假設(shè)要移除<ul>元素涕蚤，驗證以上事件發(fā)生的順序宪卿。
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument",
function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});
(2)插入節(jié)點
//假設(shè)要為<ul>添加一個<li>元素，驗證以上事件發(fā)生的順序赞季。
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeInserted", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});
7愧捕、HTML5事件
(1)contextmenu事件
- 由于contextmenu 事件是冒泡的奢驯，因此可以為document指定一個事件處理程序申钩，用以處理頁面中發(fā)生的所有此類事件。
- 這個事件的目標(biāo)是發(fā)生用戶操作的元素瘪阁。在所有瀏覽器中都可以取消這個事件撒遣。
- 通常使用contextmenu事件來顯示自定義的上下文菜單邮偎，而使用onclick事件處理程序來隱藏該菜單。
<!DOCTYPE html>
<html>
<head>
<title>ContextMenu Event Example</title>
</head>
<body>
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;
background-color:silver">
<li><a >Nicholas’ site</a></li>
<li><a >Wrox site</a></li>
<li><a >Yahoo!</a></li>
</ul>
</body>
</html>
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
});
(2)beforeunload事件
- 這個事件會在瀏覽器卸載頁面之前觸發(fā)义黎，可以通過它來取消卸載并繼續(xù)使用原有頁面禾进。
- 這個事件的意圖是將控制權(quán)交給用戶。顯示的消息會告知用戶頁面行將被卸載（正因為如此才會顯示這個消息）廉涕，詢問用戶是否真的要關(guān)閉頁面泻云，還是希望繼續(xù)留下來。
EventUtil.addHandler(window, "beforeunload", function(event){
event = EventUtil.getEvent(event);
var message = "I'm really going to miss you if you go.";
event.returnValue = message;
return message;
});
(3)DOMCdontentLoaded事件
- DOMContentLoaded 事件在形成完整的DOM 樹之后就會觸發(fā)狐蜕，不理會圖像宠纯、JavaScript 文件、CSS 文件或其他資源是否已經(jīng)下載完畢层释。
- 要處理DOMContentLoaded事件婆瓜，可以為document或window添加相應(yīng)的事件處理程序（盡管這個事件會冒泡到window，但它的目標(biāo)實際上是document）
EventUtil.addHandler(document, "DOMContentLoaded", function(event){
alert("Content loaded");
});
(4)hashchange事件
- HTML5 新增了hashchange事件贡羔，以便在URL的參數(shù)列表（及URL中“#”號后面的所有字符串）發(fā)生變化時通知開發(fā)人員廉白。
- 必須要把hashchange 事件處理程序添加給window對象，然后URL參數(shù)列表只要變化就會調(diào)用它乖寒。
- 此時的event 對象應(yīng)該額外包含兩個屬性：oldURL和newURL猴蹂。這兩個屬性分別保存著參數(shù)列表變化前后的完整URL。
EventUtil.addHandler(window, "hashchange", function(event){
alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});
- 只有Firefox 6+宵统、Chrome和Opera支持oldURL和newURL屬性晕讲。為此，最好是使用location對象來確定當(dāng)前的參數(shù)列表马澈。
EventUtil.addHandler(window, "hashchange", function(event){
alert("Current hash: " + location.hash);
});
- 使用以下代碼可以檢測瀏覽器是否支持hashchange 事件瓢省。
var isSupported = ("onhashchange" in window) && (document.documentMode ===
undefined || document.documentMode > 7);
8、設(shè)備事件
(1)orientationchange事件
- 蘋果公司為移動Safari中添加了orientationchange事件痊班，以便開發(fā)人員能夠確定用戶何時將設(shè)備由橫向查看模式切換為縱向查看模式勤婚。
- 移動Safari 的window.orientation屬性中可能包含3個值：0表示肖像模式，90表示向左旋轉(zhuǎn)的橫向模式（“主屏幕”按鈕在右側(cè)）涤伐，-90表示向右旋轉(zhuǎn)的橫向模式（“主屏幕”按鈕在左側(cè)）馒胆。
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
div.innerHTML = "Current orientation is " + window.orientation;
EventUtil.addHandler(window, "orientationchange", function(event){
div.innerHTML = "Current orientation is " + window.orientation;
});
});
- 所有iOS 設(shè)備都支持orientationchange 事件和window.orientation 屬性。
(2)MozOrientation 事件
- Firefox 3.6 為檢測設(shè)備的方向引入了一個名為MozOrientation的新事件凝果。當(dāng)設(shè)備的加速計檢測到設(shè)備方向改變時赐稽，就會觸發(fā)這個事件。
EventUtil.addHandler(window, "MozOrientation", function(event){
//響應(yīng)事件
});
- 此時的event 對象包含三個屬性：x宇攻、y和z萍摊。這幾個屬性的值都介于1到-1之間，表示不同坐標(biāo)軸上的方向。
- 如果設(shè)備向右傾斜纠俭，x值會減醒亓俊；反之冤荆，向左傾斜朴则，x值會增大。z軸檢測垂直加速度度钓简，1 表示靜止不動乌妒，在設(shè)備移動時值會減小。
- 只有帶加速計的設(shè)備才支持MozOrientation 事件.
Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.
(3)deviceorientation 事件
- 觸發(fā)deviceorientation事件時外邓，事件對象中包含著每個軸相對于設(shè)備靜止?fàn)顟B(tài)下發(fā)生變化的信息芥被。事件對象包含以下5 個屬性。
- alpha：在圍繞z 軸旋轉(zhuǎn)時（即左右旋轉(zhuǎn)時）坐榆，y 軸的度數(shù)差拴魄；是一個介于0 到360 之間的浮點數(shù)。
- beta：在圍繞x 軸旋轉(zhuǎn)時（即前后旋轉(zhuǎn)時）席镀，z 軸的度數(shù)差匹中；是一個介于-180 到180 之間的浮點數(shù)。
- gamma：在圍繞y 軸旋轉(zhuǎn)時（即扭轉(zhuǎn)設(shè)備時）豪诲，z 軸的度數(shù)差顶捷；是一個介于-90 到90 之間的浮點數(shù)。
- absolute：布爾值屎篱，表示設(shè)備是否返回一個絕對值服赎。
- compassCalibrated：布爾值，表示設(shè)備的指南針是否校準(zhǔn)過交播。
EventUtil.addHandler(window, "deviceorientation", function(event){
var output = document.getElementById("output");
output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta +
", Gamma=" + event.gamma + "<br>";
});
- 通過這些信息重虑，可以響應(yīng)設(shè)備的方向，重新排列或修改屏幕上的元素秦士。要響應(yīng)設(shè)備方向的改變而旋轉(zhuǎn)元素缺厉。
EventUtil.addHandler(window, "deviceorientation", function(event){
var arrow = document.getElementById("arrow");
arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
});
(4)devicemotion 事件
- DeviceOrientation Event 規(guī)范還定義了一個devicemotion 事件，通過devicemotion 能夠檢測到設(shè)備是不是正在往下掉隧土，或者是不是被走著的人拿在手里提针。
- 觸發(fā)devicemotion 事件時，事件對象包含以下屬性曹傀。
- acceleration：一個包含x辐脖、y和z屬性的對象，在不考慮重力的情況下皆愉，告訴你在每個方向上的加速度嗜价。
- accelerationIncludingGravity：一個包含x落萎、y和z屬性的對象，在考慮z軸自然重力加速度的情況下炭剪，告訴你在每個方向上的加速度。
- interval：以毫秒表示的時間值翔脱，必須在另一個devicemotion事件觸發(fā)前傳入奴拦。這個值在每個事件中應(yīng)該是一個常量。
- rotationRate：一個包含表示方向的alpha届吁、beta 和gamma 屬性的對象错妖。
EventUtil.addHandler(window, "devicemotion", function(event){
var output = document.getElementById("output");
if (event.rotationRate !== null){
output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" +
event.rotationRate.beta + ", Gamma=" +
event.rotationRate.gamma;
}
});
9、觸摸與手勢事件
(1)觸摸事件
- 觸摸事件會在用戶手指放在屏幕上面時疚沐、在屏幕上滑動時或從屏幕上移開時觸發(fā)暂氯。
| 名稱 | 詳細(xì) |
|---|---|
| touchstart | 當(dāng)手指觸摸屏幕時觸發(fā)；即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)亮蛔。 |
| touchmove | 當(dāng)手指在屏幕上滑動時連續(xù)地觸發(fā)痴施。在這個事件發(fā)生期間，調(diào)用preventDefault()可以阻止?jié)L動究流。 |
| touchend | 當(dāng)手指從屏幕上移開時觸發(fā)辣吃。 |
| touchcancel | 當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)。 |
- 每個觸摸事件的event對象都提供了在鼠標(biāo)事件中常見的屬性：bubbles芬探、cancelable神得、view、clientX偷仿、clientY哩簿、screenX、screenY酝静、detail节榜、altKey、shiftKey别智、ctrlKey 和metaKey全跨。
- 除了常見的DOM屬性外，觸摸事件還包含下列三個用于跟蹤觸摸的屬性亿遂。
名稱|詳細(xì)
-|-
touches|表示當(dāng)前跟蹤的觸摸操作的Touch 對象的數(shù)組浓若。
targetTouchs|特定于事件目標(biāo)的Touch 對象的數(shù)組。
changeTouches|表示自上次觸摸以來發(fā)生了什么改變的Touch 對象的數(shù)組蛇数。
每個Touch 對象包含下列屬性挪钓。
名稱|詳細(xì)
-|-
clientX|觸摸目標(biāo)在視口中的x 坐標(biāo)。
clientY|觸摸目標(biāo)在視口中的y 坐標(biāo)耳舅。
identifier|標(biāo)識觸摸的唯一ID碌上。
pageX|觸摸目標(biāo)在頁面中的x 坐標(biāo)倚评。
pageY|觸摸目標(biāo)在頁面中的y 坐標(biāo)。
screenX|觸摸目標(biāo)在屏幕中的x 坐標(biāo)馏予。
screenY|觸摸目標(biāo)在屏幕中的y 坐標(biāo)天梧。
target|觸摸的DOM 節(jié)點目標(biāo)。使用這些屬性可以跟蹤用戶對屏幕的觸摸操作霞丧。
function handleTouchEvent(event){
//只跟蹤一次觸摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止?jié)L動
output.innerHTML += "<br>Touch moved (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);
(2)手勢事件
- 當(dāng)兩個手指觸摸屏幕時就會產(chǎn)生手勢呢岗，手勢通常會改變顯示項的大小，或者旋轉(zhuǎn)顯示項蛹尝。有三個手勢事件后豫。
| 名稱 | 詳細(xì) |
|---|---|
| gesturestart | 當(dāng)一個手指已經(jīng)按在屏幕上而另一個手指又觸摸屏幕時觸發(fā)。 |
| gesturechange | 當(dāng)觸摸屏幕的任何一個手指的位置發(fā)生變化時觸發(fā)突那。 |
| gestureend | 當(dāng)任何一個手指從屏幕上面移開時觸發(fā)挫酿。 |
- 每個手勢事件的event對象都包含著標(biāo)準(zhǔn)的鼠標(biāo)事件屬性：bubbles、cancelable愕难、view早龟、clientX、clientY猫缭、screenX拄衰、screenY、detail饵骨、altKey翘悉、shiftKey、ctrlKey和metaKey居触。
- 還包含兩個額外的屬性：rotation 和scale妖混。
| 名稱 | 詳細(xì) |
|---|---|
| rotation | 表示手指變化引起的旋轉(zhuǎn)角度，負(fù)值表示逆時針旋轉(zhuǎn)轮洋，正值表示順時針旋轉(zhuǎn)（該值從0 開始）制市。 |
| scale | 表示兩個手指間距離的變化情況（例如向內(nèi)收縮會縮短距離）；這個值從1 開始弊予，并隨距離拉大而增長祥楣，隨距離縮短而減小。 |
function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
好好學(xué)習(xí)
