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公共脚本库系列(二): 添加事件多播委托的方法”更多相关内容更多精彩
赞助商链接
