當(dāng)前位置:
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript事件绑定
生活随笔
收集整理的這篇文章主要介紹了
JavaScript事件绑定
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本文介紹一些JavaScript事件綁定的常用方法及其優(yōu)缺點(diǎn),同時(shí)在最后展示一個(gè)由 Dean Edwards 寫(xiě)的一個(gè)比較完美的事件綁定方案。
傳統(tǒng)方式
element.onclick = function(e){// ...};- 非常簡(jiǎn)單和穩(wěn)定,可以確保它在你使用的不同瀏覽器中運(yùn)作一致
- 處理事件時(shí),this關(guān)鍵字引用的是當(dāng)前元素,這很有幫組
- 傳統(tǒng)方法只會(huì)在事件冒泡中運(yùn)行,而非捕獲和冒泡
- 一個(gè)元素一次只能綁定一個(gè)事件處理函數(shù)。新綁定的事件處理函數(shù)會(huì)覆蓋舊的事件處理函數(shù)
- 事件對(duì)象參數(shù)(e)僅非IE瀏覽器可用
W3C方式
element.addEventListener('click', function(e){// ...}, false);- 該方法同時(shí)支持事件處理的捕獲和冒泡階段。事件階段取決于addEventListener最后的參數(shù)設(shè)置:false (冒泡) 或 true (捕獲)。
- 在事件處理函數(shù)內(nèi)部,this關(guān)鍵字引用當(dāng)前元素。
- 事件對(duì)象總是可以通過(guò)處理函數(shù)的第一個(gè)參數(shù)(e)捕獲。
- 可以為同一個(gè)元素綁定你所希望的多個(gè)事件,同時(shí)并不會(huì)覆蓋先前綁定的事件
- IE不支持,你必須使用IE的attachEvent函數(shù)替代。
IE方式
element.attachEvent('onclick', function(){// ...});- 可以為同一個(gè)元素綁定你所希望的多個(gè)事件,同時(shí)并不會(huì)覆蓋先前綁定的事件。
- IE僅支持事件捕獲的冒泡階段
- 事件監(jiān)聽(tīng)函數(shù)內(nèi)的this關(guān)鍵字指向了window對(duì)象,而不是當(dāng)前元素(IE的一個(gè)巨大缺點(diǎn))
- 事件對(duì)象僅存在與window.event參數(shù)中
- 事件必須以ontype的形式命名,比如,onclick而非click
- 僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener
?Dean Edwards的方案(addEvent/removeEvent庫(kù))
function addEvent(elementment, type, handler) {// 為每個(gè)事件處理函數(shù)賦予一個(gè)獨(dú)立的IDif(!handler.$$guid) handler.$$guid = addEvent.guid++;// 為元素建立一個(gè)事件類(lèi)型的散列表if(!elementment.events) elementment.events = {};// 為每對(duì)元素/事件建立一個(gè)事件處理函數(shù)的散列表var handlers = elementment.events[type];if(!handlers) {handlers = elementment.events[type] = {};// 存儲(chǔ)已有的事件處理函數(shù)(如果已存在一個(gè))if(elementment["on" + type]) {handlers[0] = elementment["on" + type];}}// 在散列表中存儲(chǔ)該事件函數(shù)handlers[handler.$$guid] = handler;// 賦予一個(gè)全局事件處理函數(shù)來(lái)出來(lái)所有工作elementment["on" + type] = handleEvent;}// 創(chuàng)建獨(dú)立ID的計(jì)數(shù)器addEvent.guid = 1;function removeEvent(elementment, type, handler) {// 從散列表中刪除事件處理函數(shù)if(elementment.events && elementment.events[type]) {delementte elementment.events[type][handler.$$guid];}}function handleEvent(event) {var returnValue = true;// 獲取事件對(duì)象(IE使用全局的事件對(duì)象)event = event || fixEvent(window.event);// 獲取事件處理函數(shù)散列表的引用var handlers = this.events[event.type];// 依次執(zhí)行每個(gè)事件處理函數(shù)for(var i in handlers) {this.$$handerEvent = handlers[i];if(this.$$handlerEvent(event) === fasle) {returnValue = false;}}return returnValue;}// 增加一些IE事件對(duì)象缺乏的方法function fixEvent(event) {event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;}fixEvent.preventDefault = function() {this.returnValue = false;}fixEvent.stopPropagation = function() {this.cancelBubble = true;}- 可以在所有瀏覽器中工作,就算是更古老無(wú)任何支持的瀏覽器
- this關(guān)鍵字可以在所有的綁定函數(shù)中使用,指向的是當(dāng)前元素
- 中和了所有防止瀏覽器默認(rèn)行為和阻止事件冒泡的各種瀏覽器特定函數(shù)
- 不管瀏覽器類(lèi)型,事件對(duì)象總是作為第一個(gè)對(duì)象傳入
- 僅工作在冒泡階段(因?yàn)樗钊胧褂檬录壎ǖ膫鹘y(tǒng)方式)
總結(jié)
以上是生活随笔為你收集整理的JavaScript事件绑定的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: JavaScript DOM操作表格及样
- 下一篇: JavaScript 事件入门知识