資訊專欄INFORMATION COLUMN
摘要：所有節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。
事件處理的方法： 1、直接在html中編寫
例如：
但是這樣處理的事件存在兩個(gè)缺點(diǎn)，一個(gè)是時(shí)間差問題，一個(gè)是不同瀏覽器對(duì)標(biāo)識(shí)符的解析有差異，很可能會(huì)在訪問非限定對(duì)象成員時(shí)出錯(cuò)。
2、JavaScript指定事件處理程序每個(gè)元素都有自己的事件處理程序?qū)傩?，這些屬性通常全部小寫，例如onclick。將這種屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序，如下所示：
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("clicked");
}
在此，我們通過文檔對(duì)象取得了一個(gè)按鈕的引用，然后為它指定了onclick事件處理程序。但要注意，在這些代碼運(yùn)行以前不會(huì)指定事件處理程序，因此如果這些代碼在頁面中位于按鈕后面，就可能在一段事件內(nèi)怎么單擊都沒有反應(yīng)。
刪除事件：
btn.onclick=null;
以上都是DOM0級(jí)的事件處理方式，而DOM2級(jí)事件定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
例如，要再按鈕上為click事件添加處理程序，可以使用以下代碼：
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
與DOM0級(jí)方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運(yùn)行。
使用DOM2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序。比如：
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hello World");
},false);
這里為按鈕添加了兩個(gè)事件處理程序。這兩個(gè)事件處理程序會(huì)按照添加它們的順序觸發(fā)。
通過addEventListener()添加的事件處理程序之恩給你使用removeEventListener()來移除；移除時(shí)傳入的參數(shù)與添加處理程序時(shí)使用的參數(shù)相同。這也以為著通過addEventListener()添加的匿名函數(shù)將無法移除。因?yàn)閭魅雛emoveEventListener()中的事件處理程序函數(shù)必須與傳入addEventListener()中的相同。
在大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器。最好只在需要在事件到達(dá)目標(biāo)之前截獲它的時(shí)候?qū)⑹录幚沓绦蛱砑拥讲东@階段。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85879.html
摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：取消事件的默認(rèn)行為。阻止事件的派發(fā)包括了捕獲和冒泡阻止同一個(gè)事件的其他監(jiān)聽函數(shù)被調(diào)用。 事件模型 DOM0 級(jí)事件模型 -沒有事件流，這種方式兼容所有瀏覽器 // 方式一 將事件直接通過屬性綁定在元素上 / 方式二 獲取到頁面元素后，通過 onclick 等事件，將觸發(fā)的方法指定為元素的事件 var btn = document.getElementById(btn) btn....
摘要：事件事件在用戶退出頁面時(shí)發(fā)生。注意事件同樣觸發(fā)了頁面載入事件事件。如圖所示大體一句話描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標(biāo)簽都會(huì)觸發(fā)事件包括這種。 簡(jiǎn)介 onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在腳本中通過 window.onunload來調(diào)用。區(qū)別在于onbeforeunload在o...
摘要：先說事件流的事件流分為個(gè)階段捕獲目標(biāo)冒泡。如果是每個(gè)都去單獨(dú)綁定事件明顯不科學(xué)，畢竟去拿列表也是畢竟消耗性能的，同時(shí)每個(gè)事件綁定的回調(diào)函數(shù)也會(huì)占用大量的內(nèi)存。那如果有動(dòng)態(tài)插入的元素呢于是委托就可以用上了。 先說事件流 js的事件流分為3個(gè)階段：捕獲、目標(biāo)、冒泡。即事件來了，先從上到下傳播（捕獲），到達(dá)目標(biāo)節(jié)點(diǎn)（目標(biāo)），然后在往上傳播（冒泡）?？聪聢D： showImg(https://s...
閱讀 667·2023-04-25 15:49
閱讀 3120·2021-09-22 15:13
閱讀 1258·2021-09-07 10:13
閱讀 3480·2019-08-29 18:34
閱讀 2562·2019-08-29 15:22
閱讀 512·2019-08-27 10:52
閱讀 689·2019-08-26 18:27
閱讀 3023·2019-08-26 13:44
