Javascript implements simple on Event binding and javascripton binding

Javascript implements simple on Event binding and javascripton binding

Implement a simple on and off Methods

Introduction:

Event object:

FuncList :{}, // Save the method bound to delegate
IeFuncList: {}// Save the binding method in ie

The on and off methods in the Event object, mainly called
Event. addEvent, Event. delegateHandle Methods

Event. addEvent: Call the underlying addEventListener to add listening events.
Event. delegateHandle: when an Event occurs, as the Event bubbles up, the Event Delegate elements are determined and the corresponding callback function is executed.

AddEvent/offEvent:

Obj. addEventListener (type, fn, false );
Obj. removeEventListener (type, fn, false );

Code-Event. js

/* AddEvent * author laynezhou@tencent.com */window. event ={}; var Event = {funcList :{}, // Save the method ieFuncList :{} bound to delegate, // The method bound to ie is saved on: function (obj, selector, type, fn) {if (! Obj |! Selector) return false; var fnNew = Event. delegateHandle (obj, selector, fn); Event. addEvent (obj, type, fnNew);/* Save the Bound Method to the Event. funcList for unbinding operations */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) {/* implements the delegate conversion method. When the event bubbles up, the callback function */var func = function (event) {var event = event | window. event; var target = event. srcElement | event.tar get; var parent = target; function contain (item, elmName) {if (elmName. split ('#') [1]) {// by id if (ite M. 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) {/* If the element is triggered, it belongs to the sub-level of the (selector) element. */If (obj = parent) {return false; // The trigger element is self} 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 );}},};

Code -demo.html

<! DOCTYPE html>