資訊專欄INFORMATION COLUMN
摘要：特性這樣指定事件處理程序具有一些獨到之處。級事件處理程序通過獲得要操作對象的引用，用把一個函數(shù)賦值給一個事件處理程序?qū)傩?，比如。以這種方式添加的事件處理程序會在事件流的冒泡階段被捕獲。級事件處理程序級事件定義了兩個方法，。
一、事件處理程序
響應(yīng)某個事件的函數(shù)叫做事件處理程序（或事件偵聽器），為事件指定處理程序的方式有下面幾種。
1、html特性這樣指定事件處理程序具有一些獨到之處。
(1)、首先會創(chuàng)建一個封裝著元素屬性值的函數(shù)。這個函數(shù)中又一個局部變量event，也就是事件對象。（這個函數(shù)，你是看不見的，是在系統(tǒng)執(zhí)行的時候動態(tài)自動創(chuàng)建的。）
(2)、關(guān)于這個動態(tài)創(chuàng)建的函數(shù)，另一個有意思的地方就是它擴(kuò)展作用域的方式：
function(){
with(document){
with(this){
...//直接訪問元素的屬性值，比如name，value等
}
}
}
因此，事件處理程序要訪問自己的屬性就不需要this指明了，直接訪問就好。如果當(dāng)前元素是一個表單元素，則作用域中還會包含表單元素（form），也就是說，你也可以直接訪問form里的其它元素屬性，比如username.value，username是另一個表單元素的name值。
這樣指定事件處理程序缺點：(1)、存在一個時差問題，比如，事件處理程序里調(diào)用了一個方法，但這個方法在這個元素渲染出來時還沒有加載進(jìn)來，那這個時候觸發(fā)事件就會出錯。
(2)、這樣擴(kuò)展事件處理程序的作用域鏈在不同瀏覽器中會導(dǎo)致不同結(jié)果。
(3)、html和javascript的緊密耦合，如果要修改事件處理程序會很麻煩。
通過javascript獲得要操作對象的引用，用js把一個函數(shù)賦值給一個事件處理程序?qū)傩裕热鏾nclick。
var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert("clicked");
}
這樣指定的事件處理程序的this是指向元素本身的，因此可以this訪問元素的任何屬性和方法。以這種方式添加的事件處理程序會在事件流的冒泡階段被捕獲。如果要刪除事件處理程序，只需要將這個屬性（onclick）的值設(shè)為null。
3、DOM 2 級事件處理程序“DOM2級事件”定義了兩個方法：addEventListener() ，removeEventListener() 。所有的DOM節(jié)點都包含這兩個方法。
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
第三個參數(shù)是一個布爾值，如果是true，表示在捕獲階段調(diào)用事件處理程序；false，是在冒泡階段。
這樣指定的事件處理程序也是在其依附的元素的作用域中運行。使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。
IE實現(xiàn)了與DOM中類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接收相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。注意：事件處理名稱和addEventListener有區(qū)別，addEventListener是“ click ”，attachEvent是“ onclick ”。IE早期只支持事件冒泡，所以它的事件處理程序都被添加到冒泡階段。
IE的attachEvent與其它方法的主要區(qū)別是事件處理程序的作用域。其它方法的作用域都是其所屬元素；使用attachEvent的作用域是全局作用域，即：this等于window。
與DOM2級方法的區(qū)別是：事件處理程序不是以添加他們的順序執(zhí)行，而是以相反的順序被觸發(fā)。DOM2級是以添加他們的順序執(zhí)行的。
無論指定事件處理程序的方法是哪種，瀏覽器都會將一個event對象傳入到事件處理程序中。
var btn=document.getElementById("myBtn");
btn.onclick=function(e){
alert(e.type); //"click"
}
btn.addEventListener("click", function(e){
alert(e.type);
}, false);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107707.html
摘要：表示要執(zhí)行外部文件的路徑或鏈接。由于規(guī)范要求腳本按照他們出現(xiàn)的先后順序執(zhí)行，因此第一個延遲腳本會優(yōu)先于第二個執(zhí)行，二這兩個腳本會優(yōu)先于事件執(zhí)行。無論使用任何方式，只要不存在和屬性，瀏覽器都會按照元素在頁面中出現(xiàn)的先后順序依次解析。 元素屬性 屬性 定義 async 【可選】?？梢援惒郊虞d，表示可以立即下載此腳本，但不影響頁面其他操作。只對外部腳本有效。 charset ...
摘要：模塊化是隨著前端技術(shù)的發(fā)展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調(diào)也不等同于異步。將會討論安全的類型檢測惰性載入函數(shù)凍結(jié)對象定時器等話題。 Vue.js 前后端同構(gòu)方案之準(zhǔn)備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當(dāng)初的 React，本人對寫代碼有潔癖，代碼也是藝術(shù)。此篇是準(zhǔn)備篇，工欲善其事，必先利其器。我們先在代...
摘要：作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會與之相反，繼續(xù)保存，所以使用用后需手動標(biāo)記清除，以免造成內(nèi)存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級程序設(shè)計作者以樂之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域鏈查找 作用域鏈的查找是逐層向上查找。查...
閱讀 1118·2021-11-23 09:51
閱讀 1081·2021-10-18 13:31
閱讀 2991·2021-09-22 16:06
閱讀 4284·2021-09-10 11:19
閱讀 2206·2019-08-29 17:04
閱讀 437·2019-08-29 10:55
閱讀 2485·2019-08-26 16:37
閱讀 3381·2019-08-26 13:29
