我该如何创建一个类似于ActionScript的自定义事件类？我的意思是，我想创建一个可以用来触发自己事件并发送必要数据的类。
我不想使用像YUI或jQuery这样的第三方库来完成。我的目标是能够发送类似于这样的事件：
document.addEventListener("customEvent", eventHandler, false);
function eventHandler(e){
alert(e.para1);
}
document.dispatchEvent(new CustomEvent("customEvent", para1, para2));
请不要使用第三方库的解决方案。
对我有效的一种方法是调用document.createEvent()，进行初始化并使用window.dispatchEvent()进行分发。
var event = document.createEvent("Event");
event.initEvent("customEvent", true, true);
event.customData = getYourCustomData();
window.dispatchEvent(event);
我有点晚加入这个派对，但是我在搜寻同样的内容。我不太喜欢上面的第一个答案，因为它依赖文档来管理自定义事件。这很危险，因为它是全局的，如果另一个脚本碰巧依赖于相同的自定义事件，可能会产生冲突。
我发现的最佳解决方案在这里： Nicholas C. Zakas - JavaScript中的自定义事件
不幸的是，由于JavaScript不支持继承关键字，使用原型会有些混乱，但它确实能保持事情井然有序。
var element = document.querySelector('div#rocket');
要让客户订阅：
element.addEventListener('liftoff', function(e)
{
console.log('We have liftoff!');
});
然后使用以下代码来分派/触发/激活事件：
element.dispatch(new Event('liftoff'));
这是 John Resig 写的：
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
更多相关内容请查看他的博客文章http://ejohn.org/projects/flexible-javascript-events/。
var de = document.documentElement || document.getElementsByTagName[0];
function all(){ console.log('all') };
var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() {
return ({
customEvent: function() {
if ('onclick' in de ) {
return 'click';
}
},
init: function(){ return this.customEvent(); }
}).init();
}();
de.addEventListener(customEventForSomeSpecificElement, all, false);
其实并不难 - 事件定义并不多，只有三个版本。第一个是正确的 (addEventListener)，然后是IE的方式 (attachEvent)，还有一种兼容旧浏览器的方式 (element.onevent = function)
因此，完整的事件处理解决方案应该像这样：
setEvent = function(element, eventName, handler){
if('addEventListener' in element){
//W3
element.addEventListener(eventName,handler,false);
}else if('attachEvent' in elm){
//IE
elm.attachEvent('on'+eventName,handler)
}else{
// compatibility
elm['on'+eventName] = handler;
}
}
并清除事件：
clearEvent = function(element, eventName, handler){
if('removeEventListener' in element){
//W3
element.removeEventListener(eventName,handler,false);
}else if('detachEvent' in elm){
//IE
elm.detachEvent('on'+eventName,handler)
}else{
// compatibility
elm['on'+eventName] = null;
}
}
还有一个例子：
setEvent(document, "click", function(){alert('hello world!');});
clearEvent(document, "click", function(){alert('hello world!');});
这并不是一个完整的示例，因为兼容性处理程序总是覆盖先前的事件（它不是追加操作，而是覆盖），所以您可能希望检查是否已经设置了处理程序，然后将其保存到某个临时变量中，并在事件处理程序函数内触发它。