// 無論程序使用"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

總結

以上是生活随笔為你收集整理的javascript --- 事件对象和事件类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。