javascript 自定义事件初探


Posted in Javascript onAugust 21, 2009

还有,“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率。”。相信C#程序员对事件的好处是深有体会的。好了,Code is cheap.看代码:
function class1() { // 最简单的事件设计模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
下面看看如何给事件处理程序传递参数:
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function test() {
var obj = new class1();
var userName = " test " ;
obj.onShow = createFunction( null , " objOnShow " , userName);
obj.show();
}

"因为事件机制仅传递一个函数的名称,不带有任何参数的信息,所以无法传递参数进去",这是后话了,“要解决这个问题,可以从相反的思路去考虑,不考虑怎么把参数传进去,而是考虑如何构建一个无需参数的事件处理程序,该程序是根据有参数的事件处理程序创建的,是一个外层的封装。”,这里的“该程序”就是 createFunction函数,它巧妙地利用apply函数将带参数的函数封装为无参数函数。最后我们看看如何实现自定义事件的多绑定:
// 使自定义事件支持多绑定
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
}
我们看到,attachOnShow方法实现的基本思想是对数组的push操作,其实我们还可以在事件执行完成之后,移除事件处理函数,下面单独实现:
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // 附加事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
},
detachOnShow: function (_eHandler) { // 移除事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.pop(_eHandler);
}
}

function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
obj.detachOnShow(createFunction( null , " objOnShow " , userName));
obj.show(); // 移除一个,显示剩余的一个
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 两个都移除,一个也不显示
}
关于自定义事件的学习先到这里。

Javascript 相关文章推荐
Javascript 面向对象(三)接口代码
May 23 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JavaScript字符串对象
Jan 14 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
IE 下的只读 innerHTML
Aug 21 #Javascript
JS 控制CSS样式表
Aug 20 #Javascript
JS获取父节点方法
Aug 20 #Javascript
javascript 数组排序函数
Aug 20 #Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 #Javascript
JQUERY 浏览器判断实现函数
Aug 20 #Javascript
google地图的路线实现代码
Aug 20 #Javascript
You might like
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php实现头像上传预览功能
2017/04/27 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python中pass语句用法实例分析
2015/04/30 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python命令 -u参数用法解析
2019/10/24 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python列表的逆序遍历实现
2020/04/20 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
《美丽的公鸡》教学反思
2014/02/25 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年评职称工作总结
2014/11/20 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
新闻稿件写作范文
2015/07/18 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Nginx内网单机反向代理的实现
2021/11/07 Servers