// 無論程序使用"DOM0級"規范還是"DOM2級"規范,都會在局部產生一個event對象,
// 將其打印出來研究:
<div id="divBtn"><button id="rawBtn" >Click Me!</button></div>
<script>const divBtn = document.getElementById("divBtn");// "DOM2級"規范添加事件處理程序divBtn.addEventListener("click",function(event){console.log("div capture:",event)},true);divBtn.addEventListener("click",function(event){console.log("div bubble:",event)},false);
</script>
// 雖然,事件處理函數是div#divBtn,但是它的事件源和目標是button#rawBtn
IE的事件(event)對象:
<div id="divBtn"><button value="hi btn">Click Me!</button>
</div>
<script>const divBtn = document.getElementById('divBtn');divBtn.attachEvent("onclick", function(event){console.log(event)});
</script>
// ......
事件類型:
// UI事件
·DOMActivate:元素被(鼠標或鍵盤)激活
·load:頁面全部加載完在window上面觸發
·unload:頁面全部卸載后在window上面觸發
·abort:在用戶停止下載過程時,如果嵌入的內容沒用加載完,則在<object>元素上面觸發
·error:當發生JavaScript錯誤時,在window上面觸發
·select:當用戶選擇文本框中的一個或多個字符時觸發
·resize:當窗口或框架的大小變化時在window或框架上面觸發
·scroll:當用戶滾動帶滾動條的元素中的內容時,在該元素上面觸發// 焦點事件
·blur:在元素失去焦點時觸發
·focus:在元素獲得焦點時觸發// 鼠標事件
·click:在用戶單擊主鼠標(一般是鼠標左鍵)或者按下回車鍵時觸發
·dblclick:在用戶雙擊主鼠標按鈕時觸發
·mousedown:用戶在按下任意鼠標按鈕時觸發
·mouseenter:鼠標光標從元素外部首次移動到元素范圍之內時觸發
·mouseleave:在位于元素上方的鼠標光標移動到元素范圍之外時觸發
·mousemove:當鼠標指針在元素內部移動時重復的觸發
·mouseup:在用戶釋放鼠標按鈕時觸發// 觸摸與手勢事件
// touchstart:手指觸摸屏幕時觸發
// touchmove:手指在屏幕上滑動時連續地觸發
// touchend:手指從屏幕上移開時觸發
// touchcancel:當系統停止跟蹤觸摸時觸發
下面是一個跟蹤用戶對屏幕操作地例子:
// addHandler是一個兼容的添加事件函數.
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(); // 阻止滾動output.innerHTML += "<br>Touch moved (" +event.changedTouches[0].clientX + ", " +event.changedTouches[0].clientY + ") ";break;}}}addHandler(document, "touchstart", handlerTouchEvent);addHandler(document, "touchend", handleTouchEvent);addHandler(document, "touchmove", handleTouchEvent);
}
手勢事件:
// gesturestart: 當一個手指已經按在屏幕上而另一個手指又觸摸屏幕時觸發
// gesturechange: 當觸摸屏幕的任何一個手指在位置發生變化時觸發
// gestureend: 任何一個手指從屏幕上面移開時觸發// 一個手勢事件的例子:
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);
}
參加《JavaScript高級程序設計》(第3版)P362~P368、 P399~P402
)
)
對象)
)
)
