JavaScript-在Javascript中如何实现自定义事件？

Question

在javascript中事件是与浏览器交互的主要途径，也是一种观察者的设计模式。 一般是主体负责发布事件，观察者通过订阅该事件观察主体。
涉及DOM时，则DOM是主体，事件处理代码便是观察者。常用事件包括blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, change, select, submit, keydown, keypress, keyup, error 等。

//例如给window对象创建scroll监听事件：
window.addEventListener('scroll', function(){}, false);

Answer 1

非DOM对象处理方法，实现一个简单的事件触发器（只是简单实现，可以对其进行完善）：

<script>
(function() {
var namespace = "_$_$:";
var currentTargets = {};
//添加事件侦听
if (!Object.prototype.addEventListener) {
Object.prototype.addEventListener = function(eventType, handler) {
eventType = namespace + eventType;
var objects = currentTargets[eventType];
if(objects != null) {
for(var i = 0, len = objects.length; i < len; i++) {
var o = objects[i];
if(o["target"] === this && o["handler"] == handler) {
return;
}
}
}else{
objects = currentTargets[eventType] = [];
}
objects.push({"target":this, "handler":handler});
}
}
//移除事件侦听
if (!Object.prototype.removeEventListener) {
Object.prototype.removeEventListener = function(eventType, handler) {
eventType = namespace + eventType;
var objects = currentTargets[eventType];
if(objects != null) {
for(var i = 0, len = objects.length; i < len; i++) {
var o = objects[i];
if(o["target"] === this && o["handler"] == handler) {
objects.splice(i, 1);
if(len == 1) delete currentTargets[eventType];
return;
}
}
}
}
}
//判断是否侦听了事件类型
if (!Object.prototype.hasEventListener) {
Object.prototype.hasEventListener = function(eventType) {
eventType = namespace + eventType;
var objects = currentTargets[eventType];
if(objects != null) {
for(var i = 0, len = objects.length; i < len; i++) {
var o = objects[i];
if(o["target"] === this) {
return true;
}
}
}
}
}
//触发事件
//event： 对象，必须有type属性指定事件类型
if (!Object.prototype.dispatchEvent) {
Object.prototype.dispatchEvent = function(event) {
if(event && event.hasOwnProperty("type")) {
var eventType = namespace + event["type"];
var objects = currentTargets[eventType];
if(objects != null) {
for(var i = 0, len = objects.length; i < len; i++) {
var o = objects[i];

if(o["target"] === this) {

var evtObj = {};
for(var k in event) {
evtObj[k] = event[k];

} evtObj["target"] = this;
o["handler"](evtObj);
}
}
}
}
}
}
})();
</script>
<script>
function User() {
this.say = function(msg) {
this.dispatchEvent({"type":"msg", "content":msg});
}
}
var usr = new User();
usr.addEventListener("msg", function(evt) {
alert("usr说：" + evt.content);

});
usr.say("简单的事件触发器");
<coding-4 lang="other">
</script>

DOM元素处理：
可以采用dispatchEvent实现，用document.createEvent方法创建事件，initEvent负责初始化事件属性。

示例：

  <div id="test"><input type="button" value="test" /></div>
<script>
var o = document.getElementById("test");
o.addEventListener("test", function(evt) {
alert(evt);
});
o.onclick = function() {
if(document.createEvent) {
var evt = document.createEvent("Events");
evt.initEvent("test", false, true);
o.dispatchEvent(evt);
}
}

</script>

但是，这种方式不能够兼容IE浏览器，因此最好自己封装，对IE等浏览器进行特殊处理。

参考：XML DOM createEvent() 方法

补充：
关于createEvent方法的eventType，除了文档中列举的三个外，还可以使用Events。个人认为，自定义的事件采用Events比较合理。

Answer 2

通过你的评论描述，简单的实现了下：

 <script type="text/javascript">

function target(className) {
this.className = className;
this.addEvent = function(type,handler){
if (typeof target.prototype[this.className+"_"+type] != "function") target.prototype[this.className+"_"+type] = handler;
}
this.execute = function(handler){
typeof(target.prototype[this.className+"_"+handler.type]) == "function" && target.prototype[this.className+"_"+handler.type].call(this,handler);
}
this.remove = function(type) {
target.prototype[this.className+"_"+type] = null;
}
}

//测试

//person类
function Person(name) {
this.userName = name;
this.say = function(msg){
this.execute({"type":'msg',"name":this.userName,"info":msg});
}
}
// a 类
function a() {
this.t = function() {
this.execute({"type":'msg',"name":'xx',"info":'xxx'});
}
}

Person.prototype = new target('Person'); //继承 target类
var user = new Person('小宝');

//添加事件
user.addEvent('msg',function(event){
alert(event.name + " say: " + event.info);
});

a.prototype = new target('a'); //继承 target类
var a = new a();

a.addEvent('msg',function(event){
alert(event.name + " say: " + event.info);
});

user.say('hell world'); //触发添加的msg事件
user.remove('msg'); //清除事件
a.t(); //不受影响
user.say('hell world'); //不在触发事件

</script>