js也可以有自定义事件 注入就是这么爽
2008-05-15 17:16
435 查看
在c#中有delegate,还有特殊的可以直接应用于事件编程的delegate,那就是event。而在js中没有c#的event,更没有delegate,有的只是dom元素内置的的native的不可扩展的event,比如无法为input元素添加事件,只能在其拥有的事件(如onclick=handler)上扩展应用。那么能不能做到自定义的事件模拟效果呢?答案是肯定的,也就是本文的主题。
首先弄明白一下事件的意图——可以在发生一件事的时候执行额外的代码,如document.attachEvent('onclick', function(){alert('u click document')}),当点击页面时(事件发生了),就会执行我们为其挂接的其它代码(js中以function为语句集合,以下称为function),当然我们可以在一个事件上挂接任意多的function,这样就实现了一种灵活的可扩展编程接口。试想如果可以像在元素事件扩展应用一样可以在任意对象的任意方法上扩展,那对于js编程来讲就更加灵活了。先看一个例子,平时我们把相对对立的一个功能命名为一个function,并在需要的地方(通常是另一个function)调用以实现代码复用:
function F()
{
this.method = function()
{
alert('f.method is called')
g();
}
}
function g()
{
alert(123)
}
var f = new F();
f.method()
我们把f.method中直接调用g改写一下,封装到一个Event对象中达到一样的效果,代码如下:
var Event =
{
__list:[],
observe:function(obj, ev, fun)
{
this.__list.push(
{o:obj, e:ev, f:fun})
},
occor:function(obj, method)
{
var arr = []
for(var i=0; i<this.__list.length; i++)
{
if(this.__list[i].o==obj && this.__list[i].e==method) arr.push(this.__list[i]);
}
for(var i=0; i<arr.length; i++)
{
arr[i].f();
}
}
}
function F()
{
this.method = function()
{
alert('f.method is called')
Event.occor(this, 'method');
}
}
var f = new F();
Event.observe(f, 'method', function()
{alert(123)})
f.method()
这样乍看上去好像费了“太多”功夫,但却把“在f中调用g的写法”更通用化了,如果要在f中调用h则只需要多些一行Event.occor(this, 'methodName'),写到这里你肯定也注意到methodName的写法和最开始的写法是一样的,都是硬编的不具灵活性,如果在每个类的方法中都写入Event.occor(this, 'method')就太不雅观了,也背离了我们的初衷,动态修改一下method把它加到最后一行就ok了,下一步就是解决它,改进代码如下:
var Event =
{
__list:[],
observe:function(obj, ev, fun)
{
this.__list.push(
{o:obj, e:ev, f:fun})
},
occor:function(obj, method)
{
var arr = []
for(var i=0; i<this.__list.length; i++)
{
if(this.__list[i].o==obj && this.__list[i].e==method) arr.push(this.__list[i]);
}
for(var i=0; i<arr.length; i++)
{
arr[i].f();
}
},
inject:function(obj)
{
for(var p in obj)
{
obj[p] = new Function(obj[p].toString().replace('function()
{', '').replace('}', 'Event.occor(this,p)'))
}
}
}
function F()
{
this.method = function()
{
alert('f.method is called')
}
}
var f = new F();
Event.inject(f);
Event.observe(f, 'method', function()
{alert(123)})
f.method()
我们把显示的在被调用方法体内调用Event.occor改写到Event.inject中。到此我们就简单(还有一些安全代码没有处理,如没有判断obj[p]是否需要被改写、没有测试效率问题,没有处理更多添加Event.occor时的逻辑判断,下一步准备把它实现为一个Observeable对象,就更加灵活了)的完成了自定义事件。
相关文章推荐
- js也可以有自定义事件 注入就是这么爽
- js也可以有自定义事件 注入就是这么爽
- 自定义购物车控件,使用起来就是这么丝滑
- js简易版自定义事件及其应用
- js实现屏蔽默认快捷键调用自定义事件示例
- React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
- js注入事件
- 原来JS可以这么写
- (代码生成)JS写的代码生成器-编码也可以这么爽..
- (代码生成)JS写的代码生成器-编码也可以这么爽
- Vue.js 组件中的v-on绑定自定义事件理解
- Vue.js自定义事件的表单输入组件方法
- Cocos 2d-x 3.6 touch事件只有began,framework就是这么菜
- 就是这么简单,QQ被盗了可以这样找回来!
- 在.aspx前台使用按钮出发js事件时,可以使用多个方法,用引号隔开即可
- js利用trigger和bind实现自定义事件的定义和触发
- 使自定义事件支持多绑定 js
- js怎么捕捉网页的刷新事件,捕捉页面所有可以关闭窗口的事件
- cocos2d-js的自定义事件的两种创建方法
- js:往tr里添加td也可以这么写