给对象增加一个简单的自定义事件机制

本文介绍了一种在JavaScript中为自定义对象添加事件监听和触发机制的方法。通过构造函数和原型链实现了事件监听器的添加与移除，并演示了如何通过触发特定事件来调用相应的回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<title>给对象增加一个简单的自定义事件机制</title>

</head>

<body>

function MyObject()

{

// 保存事件监听函数数组

this.RunEventListeners = new Array();

}

MyObject.prototype.Run = function()

{

// 在这里实现Run方法的代码并且触发

// 下边是激活onrun事件

for(var i = 0; i < this.RunEventListeners.length; i++)

this.RunEventListeners[i](this);

}

MyObject.prototype.AddEvent = function(name, listener)

{

switch(name.toLowerCase())

{

case "onrun":

this.RunEventListeners[this.RunEventListeners.length] = listener;

break;

// 还可以在这里增加各种事件，最好判断一下该listener是事已经被添加，以免重复执行，不过这里省了

default:

break;

}

function OnRun1(sender)

{

alert("已经执行了OnRun1事件")

}

function OnRun2(sender)

{

alert("已经执行了OnRun2事件");

}

var myobj = new MyObject();

// 添加两个监听函数

myobj.AddEvent("onrun", OnRun1);

myobj.AddEvent("onrun", OnRun2);

// 执行Run方法，如无例外，会触发onrun事件

myobj.Run();

</script>

</body>

</html>

<html>

<head>

<title>给对象增加一个简单的自定义事件机制</title>

</head>

<body>

Function.prototype.DECLEAR_EVENT = function(evt_type)

{

var args = arguments;

var method = this;

var type = evt_type;

return function()

{

method.apply(this, args);

for(each in this.EventListeners[type])

this.EventListeners[type][each](this);

}

function MyObject()

{

// 保存事件监听函数数组

this.EventListeners = new Array();

}

MyObject.prototype.Run = function()

{

// 在这里实现Run方法的代码

}.DECLEAR_EVENT("onrun"); //onrun事件声明

MyObject.prototype.AddEvent = function(name, listener)

{

this.EventListeners[name]?

this.EventListeners[name].push(listener):this.EventListeners[name]=[listener];

}

function OnRun1(sender)

{

alert("已经执行了OnRun1事件")

}

function OnRun2(sender)

{

alert("已经执行了OnRun2事件");

}

var myobj = new MyObject();

// 添加两个监听函数

myobj.AddEvent("onrun", OnRun1);

myobj.AddEvent("onrun", OnRun2);

// 执行Run方法，如无例外，会触发onrun事件

myobj.Run();

</script>

</body>

</html>

<!--

function EventTarget(){

this._listeners={};

this.addEventListener=function(sType,fnHandle){

if ('function'!=typeof fnHandle){return;}

var ls=this._listeners[sType];

if(!ls)ls=this._listeners[sType]={};

ls[EventTarget.toHashCode(fnHandle)]=fnHandle;

};

this.dispatchEvent=function(sType){

if(!this._listeners[sType])return;

for(var hc in this._listeners[sType]){

this._listeners[sType][hc].call(this);

}

};

}

EventTarget.toHashCode=function(o){if(o._hashCode)return o._hashCode;return o._hashCode="_"+(EventTarget._hashCodeCounter++).toString(32);};

EventTarget._hashCodeCounter=0;

function TestEvent(){

EventTarget.call(this);

this.test=function(){

alert('test方法开始执行');

this.dispatchEvent('onTest');

alert('test方法执行完毕');

};

var test=new TestEvent();

test.addEventListener('onTest',function(){alert('监听到test事件');});

test.test();

var test2=new TestEvent();

test2.test();

//-->

</SCRIPT>