收集的几个不错的javascript类小例子- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 收集的几个不错的javascript类小例子

Javascript: JS 参数传递的实际应用代码分析; prototype与jquery下Ajax实现的差别; 用JS写的简单的计算器实现代码; javascript 数组操作实用技巧; JavaScript 中级笔记第二章; JavaScript 中级笔记第三章; JavaScript 中级笔记第四章闭包; JavaScript 中级笔记第五章面向对象的基础; Mootools 1.2教程函数; Mootools 1.2教程事件处理; 通过Mootools 1.2来操纵HTML DOM元素; Mootools 1.2教程设置和获取样式表属性; Mootools 1.2教程输入过滤第一部分（数字）; Mootools 1.2教程输入过滤第二部分（字符串）; Mootools 1.2教程 Fx.Tween的使用; Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件; MooTools 1.2中的Drag.Move来实现拖放; Mootools 1.2教程正则表达式; Mootools 1.2教程定时器和哈希简介; Mootools 1.2教程滚动条（Slider）

No. « ‹ 184 185 186 187 › »

技术文章搜索

关键字

Javascript 中的收集的几个不错的javascript类小例子

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 359 ::

收藏到网摘: n/a

Javascript函数加壳多用于事件绑定 javascript下function声明一些小结

自己比较喜欢javascript类，主要是方便扩展。

具体功能运行后看效果

点击运行可以看到效果:

<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 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 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

顺便贴上winter以前写的东西
winte有空的时候快来帮我加点注释
我加不动了……

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

一个功能更强大的

点击运行可以看到效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 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 id="test" style="border:1px double red;width:100px;height:55px;" onclick="alert('first')">click on me</div>
<div 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 全选提示:你可先修改部分代码,再按运行]

Javascript函数加壳多用于事件绑定 javascript下function声明一些小结

Javascript 中的 收集的几个不错的javascript类小例子

评论 (0) All

Javascript 中的收集的几个不错的javascript类小例子