DOM0級事件處理程序:

// 使用DOM0級方法指定的事件處理程序被認為是元素的方法 // 這個時候的事件處理程序是在元素的作用域中運行: <div id = "myBtn" >DOM0</div> <script>var btn = document.getElementById("myBtn");btn.onclick= function () {console.log(this);} </script>

// 注1:以上生成的DOM真的能點擊,給它加上一個style="cursor: pointer;"就成了一個像按鈕的假按鈕..(扯遠了...) // 注2:回歸正題,可以看見,此時的this(執行環境)其實是dom元素的作用域. // 注3:以DOM0級方式添加的事件,會在事件流的冒泡階段被處理.

DOM2級處理程序:

// "DOM2級事件"定義了兩個方法,用于處理指定和刪除處理程序的操作:addEventListener()和removeEventListener(). // 所有的DOM元素都包含這兩個方法 // 這兩個方法均接受三個參數,分別是:事件名、處理函數、和一個布爾值(true:捕獲階段執行,false:冒泡階段執行) <div id ="myBtn">DOM2 =></div> <script>// 箭頭函數寫法const btn = document.getElementById("myBtn");btn.addEventListener("click", ()=>{console.log("=>",this);}, false); </script><div id ="myBtn1">DOM2 bubble</div> <script>// 函數寫法(冒泡階段執行)const btn1 = document.getElementById("myBtn1");btn1.addEventListener("click",function (){console.log("bubble: ",this);}, false); </script><div id ="myBtn2">DOM2 capture</div> <script>// 函數寫法(捕獲階段執行)const btn2 = document.getElementById("myBtn2");btn2.addEventListener("click",function (){console.log("capture: ",this);}, true); </script>

// 注1:箭頭函數的作用域是聲明時候的作用域,普通函數則是執行時的作用域

跨瀏覽器事件處理程序:

// IE提供了2個不同的事件處理程序attachEvent()和deleteEvent(), // DOM2級提供了2種addEventListener()和removeEventListener() // 下面根據特性寫一個兼容的跨瀏覽器的添加的事件處理程序 const l_addEvent = function (element, type, handler){if( element.addEventListener) { // DOM2element.addEventListener(type, handler, false) ; // 冒泡階段執行} else if(element.attachEvent) { // IEelement.attachEvent("on" + type, handler);} else { // DOM0element["on" + type] = handler;} }

參考《JavaScript高級程序設計》(第3版)P350~P354

總結

以上是生活随笔為你收集整理的javascript --- DOM0级、DOM2级、跨浏览器 的事件处理程序的全部內容，希望文章能夠幫你解決所遇到的問題。

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