跨瀏覽器的事件處理函式繫結刪除封裝

admin發表於2017-04-05

現在低版本的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);
 }
}

相關文章