<!DOCTYPE html>
<html οnclick="alert('冒泡test4')">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>dom事件流模型測試（IE）</title>
</head>
<script>
window.addEventListener("冒泡click",function(){
alert("test5");
});
/*
//按下鍵後會一直執行
window.addEventListener("keydown",function(e){
console.log("======"+e.keyCode);
});
*/
window.addEventListener("keypress",function(e){
console.log(e.type+"======"+e.keyCode+"--"+e.charCode);
var div=document.getElementById("fj");
//style屬性可以獲得html標籤的樣式，但是不能獲取非行間樣式，獲取行間樣式。
//moz:getComputedStyle(div,false)[attr]
//IE: currentStyle[attr]
//
var top=div.style.top,
cTop=div.currentStyle?parseInt(div.currentStyle["top"]):parseInt(getComputedStyle(div,true)["top"]),
cLeft=div.currentStyle?parseInt(div.currentStyle["left"]):parseInt(getComputedStyle(div,true)["left"]),
v= 1,
left=div.style.left;
switch(e.charCode){
case 119://W 上
if(div.currentStyle){
div.style.top=(parseInt(div.currentStyle["top"])-v)+"px";
}else{
div.style.top=(parseInt(getComputedStyle(div,false)["top"])-v)+"px";
}
console.log(top+"---------sss------------"+cTop);
// top= (cTop- v) + "px";
break;
case 115://s 下
if(div.currentStyle){
div.style.top=(parseInt(div.currentStyle["top"])+v)+"px";
}else{
div.style.top=(parseInt(getComputedStyle(div,false)["top"])+v)+"px";
}
break;
case 97://A左
if(div.currentStyle){
div.style.left=(parseInt(div.currentStyle["left"])-v)+"px";
}else{
div.style.left=(parseInt(getComputedStyle(div,false)["left"])-v)+"px";
}
break;
case 100://D 右
if(div.currentStyle){
div.style.left=(parseInt(div.currentStyle["left"])+v)+"px";
}else{
div.style.left=(parseInt(getComputedStyle(div,false)["left"])+v)+"px";
}
break;
}
});
window.addEventListener("keyup",function(e){ //釋放按鍵時一直觸發
console.log(e.type+"======"+e.keyCode);
var div=document.getElementById("fj");
var zd=document.createElement("div");
zd.style.background="#FF0000";
zd.style.width="5px";
zd.style.height="5px";
zd.style.position="absolute";
var content=document.getElementById("content");
if(e.keyCode==76){//L
if(div.currentStyle){
zd.style.left=(parseInt(div.currentStyle["left"])+10)+"px";
zd.style.top=(parseInt(div.currentStyle["top"])-20)+"px";
}else{
zd.style.top=(parseInt(getComputedStyle(div,false)["top"])-20)+"px";
zd.style.left=(parseInt(getComputedStyle(div,false)["left"])+10)+"px";
}
console.log(zd.style.top+"||"+zd.style.left);
content.appendChild(zd);
setInterval(function(){
if(parseInt(getComputedStyle(zd,false)["top"])==0){
clearInterval();
//content.removeChild();
}else{
zd.style.top=(parseInt(getComputedStyle(zd,false)["top"])-2)+"px";
}
},100)
}
});
/**
* Dom事件流標準包含：事件冒泡和事件捕獲
* 事件流：不僅一個甚至多個元素響應同一事件。
* 事件冒泡：<源於IE>
* 最特定的事件目標(DOM:text)----->最不特定的目標（IE4:document,DOM:window）順序觸發;
* 事件捕獲：<源於Mozille>
* 最不精確的（Mozille:window,DOM:window）----------->最精確的目標(DOM:text)順序觸發;
* (不會講很多的元素暴露給事件)
* 事件冒泡模型：
*
* test5(window)------|
* ^ |
* | |
* 冒泡 test4(html<document>) <-| 捕獲
* ^ |
* | |
* test3(body)<--|
* ^ |
* | |
* test2(parent_div)<-|
* ^ |
* | |
*(點擊test的div) test（div) <---------|
*
* --------------
* 事件註冊方法：|
* -------------
* 1 html 默認的是冒泡
* 2 js
* DOM：
* ----註冊事件-----
* 參數： evnetName:string 事件名
* fn:function 事件處理回調函數，參數event對象
* useCapture：boolean false：不用捕獲用冒泡 ,true :用捕獲不用冒泡
* ele.addEventListener(eventName,fn,useCapture);
* ----移除事件-----
* 參數：同註冊事件
* ele.removeEventListener(eventName,fn,useCapture)
*
* IE：
* ----註冊事件----- (只有冒泡)
* 參數： evnetName:string 事件名
* fnHandler:function 事件處理回調函數，參數event對象
* ele.attachEvent(eventName,fnHandler);
* ----移除事件-----
* 參數：同註冊事件
* ele.detachEvent(eventName,fnHandler)
* //一個元素一個事件綁定多個處理函數順序執行
*
* //阻止事件冒泡的方法:
*
* ----------
* 事件對象 -|
* ----------
* 事件對象：捕獲事件的信息。
* 包含信息：
* 1--引起事件的對象
* 2--事件發生時鼠標的信息
* 3--事件發生時鍵盤的信息
* 時空(生命期和作用域)：
* 1--創建，只能在事件發生時創建
* 2--銷燬，事件處理函數執行完畢後銷燬
* 3--作用域，只有事件處理函數才能訪問
* IE和DOM事件對象的異同：
* 相同點:
* 1 獲取事件類型：oEvent.type
* 2 獲取按鍵代碼（keydown/keyup）：oEvent.keyCode
* keyCode總包含代表按下按鍵的一個代碼，他可能是一個字符，也可能不是。
* 3 檢測shift、alt、ctrl鍵:
* 檢測是否被按下：boolean
* oEvent.shiftKey;
* oEvent.altKey;
* oEvent.ctrlKey;
* 4 獲取客戶端座標：
* 在鼠標事件中，可用clientX和clientY屬性獲取鼠標指針在客戶端區域的位置。
* oEvent.clientX;
* oEvent.clientY;
* 5 獲取屏幕座標：
* 鼠標事件中，可以用screenX和clientY屬性獲取鼠標指針在計算機屏幕中的位置。
* oEvent.screenX;
* oEvent.clientY;
* 不同點：
* 1 獲取目標 ：
* IE：oEvent.srcElement;
* DOM:oEvent.target;
* 2 獲取字符代碼 :
* IE:oEvent.keyCode;//返回字符代碼的Unicode值
* DOM: oEvent.keyCode;//獲取實際的字符
* String.fromChatCode(oEvent.charCode);//獲取實際的字符
* 如果不確定是否包含字符：
* if(oEvent.isChar){//判斷
*
* }
* 3 阻止某個事件的默認行爲 ：
* IE：oEvent.returnValue=false; I
* Mozilla:oEvent.preventDefault();
* eg.1 右鍵阻止使用上下文菜單：
* document.body.οncοntextmenu=function(){
* if(isIE){
* oEvent=window.event;
* oEvent.returnValue=false;
* }else{
* oEvent.preventDefault();
* }
* }
* 4 停止事件複製（冒泡）：
* 阻止事件進一步冒泡
* IE：oEvent.cancelBubble=true;
* moz:oEvent.stopPropagation();I
*
* ----------
* 事件類型 |
* ----------
* 鼠標事件：
* 事件：
* click
* dbclick
* mouseDown
* mouseout
* mouseover
* mouseup
* mousemove
* 屬性：
* 座標屬性-
* type屬性-
* target(DOM)或srcElement（IE）屬性-
* shiftkey、ctrlkey、aletKey和metaKey(DOM)屬性
* button屬性（只有在mousedown / mouseover/mouseout/mouseove/mouseup）
* 事件順序：
* mousedown-->mouseup-->click-->mousedown-->mouseup-->click-->dbclick
* 鍵盤事件：
* 事件：
* keydown ：按下某鍵時發生。一直按着，就會不斷觸發
* keypress：按下某鍵，並上升一個字符時發生（也不管類似shift的鍵）。
* 一直按會持續發生。
* keyup：釋放按鍵時發生。
* 屬性：
* keyCode屬性-
* charCode屬性(僅DOM)-
* target(DOM)或者srcElement（IE）屬性-
* shiftKy ctrlKey altKey metaKey(DOM)屬性-
* 順序：
* keydown->keypress->keyup
* //如果用戶按一次某非字符按鍵（例如 shift）
* keydown->keyup
* //如果按着字符鍵且不放，keydown和keypress事件將諸葛持續觸發，知道鬆開。
* Html事件：
* load:頁面完全加載後，在window對象上觸發。所有的框架都載入後，
* 在框架集上觸發；<img/>完全載入後觸發；<object/>元素，
* 當其完全載入後在其上觸發。
* unload：完全卸載後觸發。
* abort：用戶停止下載過程時，如果<object/>對象還未完全載入，就在其上觸發。
* error：js腳本出錯時，在window對象上觸發；<img/>無法載入觸發，
* <object/>元素無法載入，框架集中一個或多個無法載入時觸發。
* select：
* 用戶選擇了文本框中的一個或多個字符時觸發(<input>/<textarea>)
* change:
* <input/>或<textarea/>失去焦點時並且獲取焦點後內容發生改變
* 時觸發。<select/>元素的值發生改變時觸發。
* submit ：<input type='submit'/>點擊時，在<from/>上觸發。
* reset ：<input type='reset'/>
* resize: 窗口或者框架的大小發生改變時觸發。
* scroll：用戶在任何帶滾動條的元素上捲動它時觸發。<body/>元素
* 包含載入頁面的滾動條。
* focus: 任何元素或者窗口本身獲取焦點時（用戶點擊它、Tab鍵切換到
* 它或者任何其他與它交互的手段）觸發。
* blur:任何元素或者窗口本身失去焦點時
* 突變事件（DOM標準的一部分，但是目前沒有主流瀏覽器實現）：
*
*/
</script>
<body οnclick="alert('冒泡test3')">
<div οnclick="alert('冒泡test2')">
<div οnclick="alert('冒泡test');">冒泡test</div>
</div>
<div id="test1">
<div id="test">捕獲test</div>
</div>
<script>
document.getElementById("test").addEventListener("click",function(e){
alert("捕獲test");
},true);
document.getElementById("test").addEventListener("click",function(e){
alert("冒泡test");
},false);
document.getElementById("test1").addEventListener("click",function(e){
alert("捕獲test1");
},true);
</script>
<div style="width:200px;height:200px;border: 2px #ff0000 solid" id="content">
<div id="fj" style="position: absolute;top:200px;left:90px;background:#1dc116;height: 20px;width: 20px; ">
</div>
</div>
</body>
</html>例子：
http://www.oschina.net/question/54100_25614