實現一個簡單的on和off方法

介紹:

Event對象:

funcList: {}, //保存delegate所綁定的方法

ieFuncList :{} //保存ie下的綁定方法

Event 對象中的 on, off 方法,主要調用

Event.addEvent, Event.delegateHandle這兩個方法

Event.addEvent: 調用底層的addEventListener添加監聽事件

Event.delegateHandle: 當發生事件之后,隨著事件的冒泡上升,判斷存在事件委托的元素,并執行對應的回調函數

addEvent / offEvent:

obj.addEventListener(type, fn, false);

obj.removeEventListener(type, fn, false);

代碼-Event.js

/**

* addEvent

* author laynezhou@tencent.com

*/

window.Event = {};

var Event = {

funcList: {}, //保存delegate所綁定的方法

ieFuncList: {}, //由于保存在ie下綁定的方法

on: function(obj, selector, type, fn) {

if (!obj || !selector) return false;

var fnNew = Event.delegateHandle(obj, selector, fn);

Event.addEvent(obj, type, fnNew);

/* 將綁定的方法存入Event.funcList，以便之后解綁操作 */

if (!Event.funcList[selector]) {

Event.funcList[selector] = {};

}

if (!Event.funcList[selector][type]) {

Event.funcList[selector][type] = {};

}

Event.funcList[selector][type][fn] = fnNew;

},

off: function(obj, selector, type, fn) {

if (!obj || !selector || !Event.funcList[selector]) {

return false;

}

var fnNew = Event.funcList[selector][type][fn];

if (!fnNew) {

return;

}

Event.offEvent(obj, type, fnNew);

Event.funcList[selector][type][fn] = null;

},

delegateHandle: function(obj, selector, fn) {

/* 實現delegate 的轉換方法，事件冒泡上升時, 符合條件時才會執行回調函數 */

var func = function(event) {

var event = event || window.event;

var target = event.srcElement || event.target;

var parent = target;

function contain(item, elmName) {

if (elmName.split('#')[1]) { //by id

if (item.id && item.id === elmName.split('#')[1]) {

return true;

}

}

if (elmName.split('.')[1]) { //by class

if (hasClass(item, elmName.split('.')[1])) {

return true;

}

}

if (item.tagName == elmName.toUpperCase()) {

return true; //by tagname

}

return false;

}

while (parent) {

/* 如果觸發的元素，屬于(selector)元素的子級。 */

if (obj == parent) {

return false; //觸發元素是自己

}

if (contain(parent, selector)) {

fn.call(obj, event);

return;

}

parent = parent.parentNode;

}

};

return func;

},

addEvent: function(target, type, fn) {

if (!target) return false;

var add = function(obj) {

if (obj.addEventListener) {

obj.addEventListener(type, fn, false);

} else {

// for ie

if (!Event.ieFuncList[obj]) Event.ieFuncList[obj] = {};

if (!Event.ieFuncList[obj][type]) Event.ieFuncList[obj][type] = {};

Event.ieFuncList[obj][type][fn] = function() {

fn.apply(obj, arguments);

};

obj.attachEvent("on" + type, Event.ieFuncList[obj][type][fn]);

}

}

if (target.length >= 0 && target !== window && !target.tagName) {

for (var i = 0, l = target.length; i < l; i++) {

add(target[i])

}

} else {

add(target);

}

},

offEvent: function(target, type, fn) {

if (!target) return false;

var remove = function(obj) {

if (obj.addEventListener) {

obj.removeEventListener(type, fn, false);

} else {

//for ie

if (!Event.ieFuncList[obj] || !Event.ieFuncList[obj][type] || !Event.ieFuncList[obj][type][fn]) {

return;

}

obj.detachEvent("on" + type, Event.ieFuncList[obj][type][fn], false);

Event.ieFuncList[obj][type][fn] = {};

}

}

if (target.length >= 0 && target !== window && !target.tagName) {

for (var i = 0, l = target.length; i < l; i++) {

remove(target[i])

}

} else {

remove(target);

}

},

};

代碼-DEMO.html

test

測試 Event

• 1
• 2
• 3
• 4
• 5

取消綁定

(function(){

/* 演示demo*/

var $id=function(id)

{

return document.getElementById(id) || id;

}

var outer = $id("content"),

btn = $id("text");

Event.on(outer,'button',"click",add);

Event.on(outer,'#unbind',"click",remove);

//動態添加一個按鈕,查看是否有事件響應

var newbtn = document.createElement("button");

var node = document.createTextNode("new button");

newbtn.appendChild(node);

outer.appendChild(newbtn);

function add(){

var e = arguments[0] || window.event;

var target = e.srcElement || e.target;

console.log("target:",target);

btn.innerHTML = target.innerHTML + ' ' + e.type;

}

function remove(){

Event.off(outer,'button',"click",add);

Event.off(outer,'#unbind',"click",remove);

}

})();

總結

以上是生活随笔為你收集整理的html事件绑定的方法,javascript实现简单的on事件绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。