Javascript公共脚本库系列(二): 添加事件多播委托的方法

一.摘要

本系列文章是为了抽象通用的,跨浏览器的脚本方法.

本篇文章为我们的轻量级脚本库增加添加多播委托的方法.可以实现"单击页面空白区域则关闭页面上所有弹出层"等类似的功能.

二.实现效果

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);
    }
}

ScriptHelper类才是我们要打造的.为了实现效果还要添加一些辅助函数, 我们将在下面的实例中讲解到.

四.应用实例

需要用到三个脚本::

ScriptHelper

与业务逻辑无关的, 实现效果的工具类, 放在ScriptHelper.js中.

代码较多,此处忽略.

引用地址:https://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");
}

引用地址:https://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 );
    }
}

引用地址:https://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="https://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script>
    <script src="https://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="https://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的组织和引用以后也需要进行研究.

posted @ 2009-02-06 15:16 ziqiu.zhang 阅读(7638) 评论(11) 编辑收藏举报

刷新页面返回顶部