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