WEB开发网
开发学院网页设计JavaScript Javascript公共脚本库系列(二): 添加事件多播委托... 阅读

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

 2010-09-14 13:38:17 来源:WEB开发网   
核心提示:一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法.本篇文章为我们的轻量级脚本库增加添加多播委托的方法.可以实现"单击页面空白区域则关闭页面上所有弹出层"等类似的功能.二.实现效果 1.当打开一个菜单时关闭其他菜单. 2.在页面空白地方单击后就将关闭所有弹出层. 上面两个效果是系列一文章中的

一.摘要

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

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

二.实现效果

1.当打开一个菜单时关闭其他菜单.

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

2.在页面空白地方单击后就将关闭所有弹出层.

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

上面两个效果是系列一文章中的回复里大家建议实现的.其实我是想放到本篇文章单独讲解.因为很多人认为实现此功能很简单,修改一下弹出层方法就可以实现.

但是其实不然.在这里我要纠正两个错误观点:

1.修改弹出菜单方法ScriptHelper.showDivCommon实现网站业务逻辑

不能将业务逻辑与功能类混合在一起.ScriptHelper是一个功能类,提供的是"和业务无关的功能函数",通俗点讲就是大家不需修改就可以用在自己的网站上. 每个网站的菜单肯定都不一样. 所以不能将自己网站的业务逻辑放在我们的轻量级类库中.

2.使用"document.onclick="或者"<body onclick=>"添加事件函数

上面两种语法是我们常常使用的添加事件函数的方法, 这没有错, 而且也很少遇到问题. 但是这仅仅是因为页面中的大部分对象只需要一个事件函数.

如果一个页面上既有菜单,又有弹出层,又有弹出式日历,等等等等.我们希望在空白处点击时关闭上面的任意一个弹出对象,此时就需要使用多播委托,就是为一个事件添加多个处理函数.

1 2 3 4  下一页

Tags:Javascript 公共 脚本

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接