click,load,mouseover都是事件的名字，而響應某個事件的函數就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以'on'開頭，onclick,onload

事件處理程序（html事件處理程序，dom0級事件處理程序，dom2級事件處理程序，ie事件處理程序，跨瀏覽器事件處理程序）

html事件處理程序

1、內置js

<input type='button' value='click me' onclick='alert("clicked")'/>

當點擊這個按鈕時，就會顯示一個警示框
注意:不能在其中使用未經轉義的html語法字符 例如雙引號（""），小于號（<）,大于號(>)。

<input type='button' value='click me' onclick='alert("clicked")'/>

?

2、函數調用

<script type='text/javascript'>function showMessage(){alert('Hello world');} </script> <input type='button' value='click me' οnclick='showMessage()'/>

?

事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼

3、其他

<input type='button' value='click me' onclick='alert(value)'/> = <input type='button' value='click me' onclick='alert(this.value)'/>

?

this值等于事件的目標元素

<input type='button' value='click me' onclick='alert(event.type)'/>

?

通過event變量，可以直接訪問事件對象，不用自己定義它

<form action="" post='post'><input type='text' value='click me' name='username'/><input type='button' value='click me' onclick='alert(username.value)'/> </form>

?

擴展作用域，讓事件處理程序無需引用表單元素就能訪問其他表單字段

html事件處理程序的缺點：
1、如果用戶在html元素一出現在頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具備執行條件。
2、這樣擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同的結果，不同js引擎遵循的標識符解析規則略有差異，很可能會在訪問非限定對象成員時出錯。
3、html與js代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方：html代碼和js代碼。

DOM0級事件處理程序

通過js指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。eg:

<script>var btn = document.getElementById('myBtn');btn.onclick=function(){alert('clicked');} </script> <input type='button' value='click me' id='myBtn'/>

?

使用dom0級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中通過this引用當前元素

var btn = document.getElementById('myBtn'); btn.onclick=function(){alert(this.id); }

?

在事件處理程序中通過this訪問元素的任何屬性和方法。以這種方式添加的事件處理程序會在事件流的冒泡階段被處理

btn.onclick = null;//刪除事件處理程序

?

將事件處理程序設置為null后，再單擊按鈕將不會有任何動作發生

DOM2級事件處理程序

var btn = document.getElementById('myBtn'); btn.addEventListener('click',function(){alert(this.id); },false)

?

DOM2級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()；所有dom都包含這兩個方法，并且它們都接受3個參數：
要處理的事件名
作為事件處理程序的函數
一個布爾值(true表示捕獲階段調用事件處理程序，false表示冒泡階段調用事件處理程序)
特點：
1、與dom0級一樣，這里添加的事件處理程序依附在作用域中運行（要先加載dom，再加載js）
2、可以添加多個事件處理程序

var btn = document.getElementById('myBtn'); btn.addEventListener('click',function(){alert(this.id); },false) btn.addEventListener('click',function(){alert('Hello world'); },false)

?

3、通過addEventListener()添加的事件處理程序只能使用removeEventListener()移除，移除時傳入的參數與添加處理程序時的參數相同，這也意味著addEventListener()添加的匿名函數將無法移除

var btn = document.getElementById('myBtn'); btn.addEventListener('click',function(){alert(this.id); },false)//省略其它代碼 btn.removeEventListener('click',function(){ //沒有用alert(this.id); },false)

?

看似使用了相同的參數，實際上，第二個參數與傳入的那個時完全不同的函數

var btn = document.getElementById('myBtn'); var handler = function(){alert(this.tid) } btn.addEventListener('click',handler,false)//省略其它代碼 btn.removeEventListener('click',handler,false);//有效

?

IE事件處理程序

IE實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數，由于IE8及更早版本支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段

var btn = document.getElementById('myBtn'); btn.attachEvent('onclick',function(){alert('Clicked'); alert(this === window); //true }) btn.attachEvent('onclick',function(){alert('Hello World'); })

?

注意：
1、dom0在其所屬元素的作用域內運行，使用attachEvent()方法的情況下，事件處理程序會在全局作用中運行,this等于window，如果在編寫跨瀏覽器的代碼時，牢記這一區別非常重要
2、與addEventListener類似，可以為一個元素添加多個事件處理程序
3、與dom不同的是，這些事件處理程序不是以添加它們的順序執行，而是以相反的順序被觸發，單機這個例子，首先會看到hello world，然后才是clicked
4、使用attachEvent()添加的事件可以通過detachEvent()來移除，條件是必須提供相同的參數。與DOM方法一樣，這也意味著添加的匿名函數將不能被移除

var btn = document.getElementById('myBtn'); var handler = function(){alert('Clicked'); } btn.attachEvent('onclick',handler); //這里省略了其他代碼 btn.detachEvent('onclick',handler);

?

跨瀏覽器的事件處理程序

要保證處理事件的代碼能在大多數瀏覽器下一致運行，只需關注冒泡階段。第一個要創建的方法是addHandler()，它的職責視情況分別使用dom0級方法、dom2級方法或ie方法來添加事件

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;}},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;}} }

?

轉載于:https://www.cnblogs.com/wzndkj/p/7907048.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的事件(二)：事件处理程序的全部內容，希望文章能夠幫你解決所遇到的問題。

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