Javascript公共脚本库系列(二): 添加事件多播委托的方法
2009-02-06 15:16
537 查看
一.摘要
本系列文章是为了抽象通用的,跨浏览器的脚本方法.本篇文章为我们的轻量级脚本库增加添加多播委托的方法.可以实现"单击页面空白区域则关闭页面上所有弹出层"等类似的功能.
二.实现效果
1.当打开一个菜单时关闭其他菜单.2.在页面空白地方单击后就将关闭所有弹出层.
上面两个效果是系列一文章中的回复里大家建议实现的.其实我是想放到本篇文章单独讲解.因为很多人认为实现此功能很简单,修改一下弹出层方法就可以实现.
但是其实不然.在这里我要纠正两个错误观点:
1.修改弹出菜单方法ScriptHelper.showDivCommon实现网站业务逻辑
不能将业务逻辑与功能类混合在一起.ScriptHelper是一个功能类,提供的是"和业务无关的功能函数",通俗点讲就是大家不需修改就可以用在自己的网站上. 每个网站的菜单肯定都不一样. 所以不能将自己网站的业务逻辑放在我们的轻量级类库中.2.使用"document.onclick="或者"<body onclick=>"添加事件函数
上面两种语法是我们常常使用的添加事件函数的方法, 这没有错, 而且也很少遇到问题. 但是这仅仅是因为页面中的大部分对象只需要一个事件函数.如果一个页面上既有菜单,又有弹出层,又有弹出式日历,等等等等.我们希望在空白处点击时关闭上面的任意一个弹出对象,此时就需要使用多播委托,就是为一个事件添加多个处理函数.
注意:常常在一个项目中,开发日历的程序员并不知道开发菜单的程序员也重写了document.onclick函数.所以如果使用我们平时修改事件的方法会造成覆盖掉别人的函数.
三.实现代码.
实现多播委托的脚本非常简单, 我还是将这个方法放到ScriptHelper类中://统一的为对象添加多播事件委托的方法 /* 参数说明: oTarget : 要添加事件的对象.比如"document". sEventType : 事件类型.比如单击事件"click". fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalendar" 使用举例: //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件 var cf = document.getElementById("CalFrame"); if( cf != null && hideCalendar != null ) { ScriptHelper.addEventListener( document, "click", hideCalendar ); } */ scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler) { if( oTarget.addEventListener )//for dom { oTarget.addEventListener( sEventType, fnHandler, false ) } else if( oTarget.attachEvent )//for ie { oTarget.attachEvent( "on" + sEventType, fnHandler); } }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
ScriptHelper类才是我们要打造的.为了实现效果还要添加一些辅助函数, 我们将在下面的实例中讲解到.
四.应用实例
需要用到三个脚本::ScriptHelper
与业务逻辑无关的, 实现效果的工具类, 放在ScriptHelper.js中.代码较多,此处忽略.
引用地址:http://files.cnblogs.com/zhangziqiu/CommonScript.js
CommonScript
与业务逻辑相关的类.目前里面有一个方法closeMenu用于关闭网站的所有菜单.放在CommonScript.js中代码:
/* CommonScript是静态类, 里面存放和项目相关但是会被多个页面使用的方法. 修改历史: 2009.2.6 增加closeMenu函数,用于关闭网站所有菜单项. */ var CommonScript = function() { } CommonScript.closeMenu = function() { ScriptHelper.closeDivCommon("subMenu1"); ScriptHelper.closeDivCommon("subMenu2"); }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
引用地址:http://files.cnblogs.com/zhangziqiu/CommonScript.js
JSFooter.js
这个脚本没有使用对象封装, 一般在页面的底部加载, 目前的作用是为Document对象的onclick事件添加多个方法调用.代码:
/* JSFooter 用于为页面添加事件委托. 其中主要为document对象添加多播委托.一边在单击页面任意地方就可以关闭页面上所有的弹出窗口. */ if( ScriptHelper == null ) { if( typeof( scriptHelper )=='undefined' || scriptHelper==null) { alert("未正确加载ScriptHelper类"); } else { ScriptHelper = new scriptHelper(); } } else { //添加Menu菜单关闭函数 if( typeof(CommonScript)!='undefined' && CommonScript != null && typeof(CommonScript.closeMenu)!='undefined' && CommonScript.closeMenu != null ) { ScriptHelper.addEventListener( document, "click", CommonScript.closeMenu ); } }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
引用地址: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="#">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>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
五.脚本分析
CommonScript.closeMenu方法用于关闭所有的菜单弹出层. 我们在JSFooter.js为document对象的click事件添加了此方法.这也是为什么在我们的弹出图层方法中要取消冒泡.不取消冒泡则弹出层刚显示就会立刻被关闭掉.
CommonScript 类将其声明了一个静态类. javascript里面的使用prototype方式声明实例对象或实例方法, 也就是声明后需要new一个实例才可以使用.比如我们的ScriptHelper:
//建立scriptHelper类的一个实例对象.全局使用. var ScriptHelper = new scriptHelper();
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
如果不使用prototype直接 声明:
CommonScript.closeMenu = function(){...}
则CommonScript.closeMenu是一个静态方法.我们可以随时使用而不用声明实例:
CommonScript.closeMenu()
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
六.总结
本篇的核心代码非常少, 其实主要是完善系列一实例的. 其中脚本的切割和组织也许大家可以借鉴, 这是一种各个网站通用的方式. 其实至于如何组织项目的javascript, 目前已经有了一些开源项目, 组织脚本和你使用那种类库无关. 作为网站的框架的一部分,javascript的组织和引用以后也需要进行研究.相关文章推荐
- 统一的为对象添加多播事件委托的方法
- 委托、Lambda表达式、事件系列04,委托链是怎样形成的, 多播委托, 调用委托链方法,委托链异常处理
- 玩无限消乐的设计示例(基础篇)DataGridView控件添加拖放事件方法和委托
- Delegate,Action,Func,匿名方法,匿名委托,事件 (转载)
- [导入]C# 为一个方法添加事件的方法 Event delegate
- 温故而知新:Delegate,Action,Func,匿名方法,匿名委托,事件
- jQuery-1.9.1源码分析系列(十) 事件系统——事件委托
- jquery动态添加元素事件失效问题解决方法 (自测过)
- jquery中获得$.ajax()事件返回的值并添加事件的方法
- 在VS2008的WPF工程中添加事件的方法
- Jquery动态添加节点,绑定事件失效的解决方法
- Asp.net 动态创建的控件并添加事件,无响应的解决方法。
- IOS 添加广告的主要委托方法
- C# 委托系列(一)将方法作为方法的参数
- asp.net 给文本框添加回车事件 调用后台方法
- 动态添加新元素事件无法触发解决方法
- jquery事件委托的回调函数中调用全局变量的简单方法
- Android自定义控件系列 十:利用添加自定义布局来搞定触摸事件的分发,解决组合界面中特定控件响应特定方向的事件
- jquery事件委托的回调函数中调用全局变量的简单方法
- jquery事件委托的回调函数中调用全局变量的简单方法