跨瀏覽器的事件處理函式繫結刪除封裝
現在低版本的IE瀏覽器使用者不在少數,但是對於事件處理函式的繫結和解繫結操作是有所差異的。
下面就分享一段程式碼例項,它實現了跨瀏覽器的事件處理函式繫結和解綁的封裝功能。
一.事件處理函式繫結:
[JavaScript] 純文字檢視 複製程式碼/** * 跨平臺的事件監聽函式 * @param {Node} node 需要監聽事件的DOM節點 * @param {String} eventType 需要監聽的事件型別 * @param {Function} callback 事件監聽回撥函式 * @type Function 返回值為函式型別 * @return 返回監聽回撥函式的引用,用於釋放監聽 */ function bindEvent(node, eventType, callback) { if (node.attachEvent) { if (eventType.indexOf('on')) { eventType = 'on' + eventType;} node.attachEvent(eventType, callback); } else { if (!eventType.indexOf('on')) eventType = eventType.substring(2, eventType.length); node.addEventListener(eventType, callback, false); } return callback; }
二.解綁事件處理函式:
[JavaScript] 純文字檢視 複製程式碼/** * 跨平臺的事件監聽解除安裝函式 * @param {Node} node 需要解除安裝監聽事件的DOM節點 * @param {String} eventType 需要解除安裝監聽的事件型別 * @param {Function} callback 解除安裝事件監聽回撥函式 */ function removeEvent(node, eventType, callback) { if (node.detachEvent) { if (eventType.indexOf('on')) { eventType = 'on' + eventType;} node.detachEvent(eventType, callback); } else { if (!eventType.indexOf('on')) eventType = eventType.substring(2, eventType.length); node.removeEventListener(eventType, callback, false); } }
相關文章
- echarts 繫結事件處理函式Echarts事件函式
- Event Handler 事件處理程式 2 —跨瀏覽器事件物件《高程3》事件瀏覽器物件
- 【封裝小技巧】列表處理函式的封裝封裝函式
- 【封裝小技巧】數字處理函式的封裝封裝函式
- 瀏覽器相容問題處理總結瀏覽器
- 現代瀏覽器探祕(part4):事件處理瀏覽器事件
- 360瀏覽器怎麼解除安裝乾淨 怎麼徹底刪除360瀏覽器瀏覽器
- uni-app入門教程(3)資料繫結、樣式繫結和事件處理APP事件
- 【JavaScript】通過封裝自己的JSONP解決瀏覽器的跨域問題(Ajax跨域)JavaScript封裝JSON瀏覽器跨域
- JavaScript 註冊事件處理函式JavaScript事件函式
- 瀏覽器跨域瀏覽器跨域
- 瀏覽器中的事件流和node中處理時間迴圈的分析瀏覽器事件
- 前端chrome瀏覽器除錯總結前端Chrome瀏覽器除錯
- JavaScript 批量註冊事件處理函式JavaScript事件函式
- 使用瀏覽器事件瀏覽器事件
- 瀏覽器事件解析瀏覽器事件
- 瀏覽器滑鼠事件瀏覽器事件
- 設定谷歌瀏覽器跨域(本地除錯可用)谷歌瀏覽器跨域除錯
- React中this值繫結和事件函式傳參React事件函式
- chrome瀏覽器頁面獲取繫結返回頂部動畫事件外掛Chrome瀏覽器動畫事件
- 如何處理瀏覽器的斷網情況?瀏覽器
- 瀏覽器事件迴圈(結合vue nextTicket)瀏覽器事件Vue
- Laravel 瀏覽器跨域Laravel瀏覽器跨域
- 谷歌瀏覽器跨域谷歌瀏覽器跨域
- for迴圈批量註冊事件處理函式事件函式
- 瀏覽器事件系統瀏覽器事件
- JavaScript瀏覽器事件物件JavaScript瀏覽器事件物件
- vue元件封裝及父子元件傳值,事件處理Vue元件封裝事件
- 瀏覽器中的事件迴圈瀏覽器事件
- 瀏覽器的事件環機制瀏覽器事件
- WebAPIs-06:動畫函式封裝 + 觸屏事件WebAPI動畫函式封裝事件
- win10安裝谷歌瀏覽器失敗如何處理_win10谷歌瀏覽器安裝不了怎麼修復Win10谷歌瀏覽器
- 封裝springmvc處理ajax請求結果封裝SpringMVC
- JavaScript為事件處理函式傳遞引數JavaScript事件函式
- 徹底理解瀏覽器的跨域瀏覽器跨域
- 無法刪除pod的處理
- JS給全域性繫結事件以及給除某個元素外的其他元素繫結事件JS事件
- SpringMVC(三)處理器方法形參繫結(繫結陣列、集合)、異常處理器、controller方法返回值SpringMVC陣列Controller
- 使用img的onerror事件來繫結圖片異常時的處理Error事件