收集的幾個(gè)不錯(cuò)的javascript類(lèi)小例子

2019-11-21 01:50:27

字體：大中小

供稿：網(wǎng)友

具體功能運(yùn)行后看效果

<img id=img1 style="height:100;width:100;"></img> <button onclick="img1.onclick.AddFunction(f1)">添加f1</button><button onclick="img1.onclick.AddFunction(f2)">添加f2</button><button onclick="img1.onclick.AddFunction(f3)">添加f3</button> <button onclick="img1.onclick.RemoveFunction(f1)">移除f1</button><button onclick="img1.onclick.RemoveFunction(f2)">移除f2</button><button onclick="img1.onclick.RemoveFunction(f3)">移除f3</button> <div   class="iwvjtn8m0"   id=output></div> <SCRIPT LANGUAGE="JavaScript"> function FunctionArray() {     var functions=new Array();     var FA=function (){                 for(var i=0;i<functions.length;i++){             if(functions[i] instanceof Function)functions[i]();         }     }     FA.AddFunction=function(newFunction){         if(newFunction instanceof Function)         {             for(var i=0;i<functions.length;i++){                 if(functions[i]==newFunction)return;             }             functions.push(newFunction);         }     }     FA.RemoveFunction=function(theFunction){         for(var i=0;i<functions.length;i++){             if(functions[i]==theFunction)functions.splice(i,1);         }             }     return FA; } img1.onclick=FunctionArray(); function f1() {     output.innerHTML+="f1 runs!!"; } function f2() {     output.innerHTML+="f2 runs!!"; } function f3() {     output.innerHTML+="f3 runs!!"; } </SCRIPT>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

順便貼上winter以前寫(xiě)的東西
winte有空的時(shí)候快來(lái)幫我加點(diǎn)注釋
我加不動(dòng)了……

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

一個(gè)功能更強(qiáng)大的

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建網(wǎng)頁(yè) 1</title> <script language="javascript"> if(typeof asfman == "undefined") asfman = {}; //through below method dispath events should note:addEventListener's eventType should not conflict with method asfman.onMethodExecute = function(obj,method,eventType,beforeMethod,evt) {     var old = obj[method] || function(){};     evt = evt || {};     obj[method] = function()     {         evt.arguments = arguments;         beforeMethod && this.dispatchEvent(eventType,evt);         old.apply(this,arguments);         beforeMethod || this.dispatchEvent(eventType,evt);     } } asfman.EventManager = function() {     this.dispatchEvent = function(eventType, eventArgs)     {         eventArgs = eventArgs || {};         var events = this["on"+eventType];         var called = 0;         if(events && typeof(events) == "function") events = [events];         if(!eventArgs.type) eventArgs.type = eventType;                  if(events)         {             var len=events.length;             var capturer=events.capturer;             var capturerName=events.capturerName;             var evt;             for(var i=0;i<len;i++)             {                 evt = events[i];                 called++;                 evt.call(this,eventArgs);                 if(!eventArgs.cancelBubble && called == len && capturer && capturerName && capturer[capturerName])                 {                 //if eventArgs.cancelBubble is not set true and..,run the capturer function                     capturer[capturerName](eventArgs);                 }                 if(called == len && eventArgs.defaultOp)                  {                 //if exists the defaultOp function ,run it                     eventArgs.defaultOp.call(this, eventArgs);                 }                         }         }         else if(eventArgs.defaultOp)         {             eventArgs.defaultOp.call(this, eventArgs);         }     }          this.captureEvents = function(target, eventType, capturerName, closure)     {         if(typeof capturerName == "function")         {             closure = capturerName;             capturerName = null;         }         capturerName = capturerName || "on" + eventType;                  target["on"+eventType] = target["on"+eventType] || [function(){}];         var events = target["on"+eventType];         if(typeof(events) == "function")         {             target["on"+eventType] = [events];         }                  target["on"+eventType].capturer = this;         target["on"+eventType].capturerName = capturerName;         if(closure)    this[capturerName] = closure;     }     this.addEventListener = function(eventType, closure)     {         if(this["on"+eventType] == null)         {             this["on"+eventType] = [];         }         var events = this["on"+eventType];         if(events && typeof(events) == "function"){             this["on"+eventType] = [events];                     events = this["on"+eventType];         }         events.push(closure);         return closure;     }     this.removeEventListener = function(eventType, closure)     {         var events = this["on"+eventType];         if(events && typeof(events) == "function")             events = [events];                          for(var i = 0; i < events.length; i++)         {             if(events[i] == closure) events.splice(i, 1);         }         return closure;     } } </script> </head> <body> <div   class="iwvjtn8m0"   id="test" style="border:1px double red;width:100px;height:55px;" onclick="alert('first')">click on me</div> <div   class="iwvjtn8m0"   id="test2" onclick='alert("second")' style="border:1px double red;margin:10px;width:200px;height:100px;"></div> <script> var obj1 = document.getElementById("test"),obj2 = document.getElementById("test2"); asfman.EventManager.call(obj1); obj1.addEventListener("test",function(){obj2.innerText = " test ";}); obj1.addEventListener("test",function(){alert("test");}); asfman.onMethodExecute(obj1,"onclick","test"); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：特漂亮的JS圖片排列旋轉(zhuǎn)效果代碼

下一篇：Javascript函數(shù)加殼多用于事件綁定