js也可以有自定义事件 注入就是这么爽_C#应用

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