Javascript公共脚本库系列(二): 添加事件多播委托的方法
2010-09-14 13:38:17 来源：WEB开发网引用地址:http://files.cnblogs.com/zhangziqiu/JSFooter.js
实例完整页面代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">五.脚本分析
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ScriptHelper 类测试页面</title>
<script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/zhangziqiu/CommonScript.js" type="text/javascript"></script>
<style type="text/css">
.cursorHand { cursor:pointer;}
</style>
</head>
<body style="position:relative;">
<div style="height:200px;"></div>
<!-- Main Menu -->
<div >
<a class="cursorHand" onclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a>
<a class="cursorHand" onclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a>
<a class="cursorHand" href="http://p5s8.ddvip.com/index.php#">NoSubMenu</a>
</div>
<!-- Sub Menu 1 -->
<div id="subMenu1" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; margin:0px; padding:5px; height:100px;">
<div>1-1</div>
<div>1-2</div>
</div>
<!-- Sub Menu 2 -->
<div id="subMenu2" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; padding:5px;" >
<div>2-1</div>
<div>2-2</div>
</div>
<!-- JSFooter -->
<script src="http://files.cnblogs.com/zhangziqiu/JsFooter.js" type="text/javascript" defer="defer"></script>
</body>
</html>
CommonScript.closeMenu方法用于关闭所有的菜单弹出层. 我们在JSFooter.js为document对象的click事件添加了此方法.
这也是为什么在我们的弹出图层方法中要取消冒泡.不取消冒泡则弹出层刚显示就会立刻被关闭掉.
CommonScript 类将其声明了一个静态类. javascript里面的使用prototype方式声明实例对象或实例方法, 也就是声明后需要new一个实例才可以使用.比如我们的ScriptHelper:
//建立scriptHelper类的一个实例对象.全局使用.
var ScriptHelper = new scriptHelper();
如果不使用prototype直接 声明:
CommonScript.closeMenu = function(){...}
则CommonScript.closeMenu是一个静态方法.我们可以随时使用而不用声明实例:
CommonScript.closeMenu()六.总结
本篇的核心代码非常少, 其实主要是完善系列一实例的. 其中脚本的切割和组织也许大家可以借鉴, 这是一种各个网站通用的方式. 其实至于如何组织项目的javascript, 目前已经有了一些开源项目, 组织脚本和你使用那种类库无关. 作为网站的框架的一部分,javascript的组织和引用以后也需要进行研究.
Javascript公共脚本库系列(一): 弹出层脚本
Javascript公共脚本库系列(二): 添加事件多播委托的方法
Tags：Javascript 公共 脚本
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript公共脚本库系列(二): 添加事件多播委托的方法”更多相关内容
中查找“Javascript公共脚本库系列(二): 添加事件多播委托的方法”更多相关内容更多精彩
赞助商链接
