自訂事件，就是有別於有別於有瀏覽器特定行為的事件(類似click, mouseover, submit, keydown等事件)，事件名稱可以隨意定義，可以透過特定的方法進行添加，觸發以及刪除。本文我們就來談談JavaScript中的自訂事件編寫的基礎知識。
與自訂事件的函式有 Event、CustomEvent 和 dispatchEvent。
直接自訂事件，使用Event 建構子：
var event = new Event('build');
##// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event) ;
detail: {
...
},
bubbles: true,
cancelable: false
}
obj.addEventListener("cat", function(e) { process(e.detail) } );
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent( event);
$(element).on('myCustomEvent', function(){});
// 觸發事件
$(element). trigger('myCustomEvent');
此外，你還可以在觸發自訂事件時傳遞更多參數資訊：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
obj[type] = 0;
obj[type]++;
obj.attachEvent('onpropertychange', function(event){
if( event.propertyName == type ){
callback.call(obj) ;
}
});
#
這個方法的原理實際上是在DOM 中增加一個自訂屬性，同時監聽元素的propertychange 事件，當DOM 的某個屬性的值改變時就會觸發propertychange 的回調，再在回調中判斷發生改變的屬性是否為我們的自訂屬性，若是則執行開發者實際定義的回呼。從而模擬了自訂事件的機制。
為了使到自訂事件的機制能配合標準事件的監聽和模擬觸發，這裡給出一個完整的事件機制，這個機制支援標準事件和自訂事件的監聽，移除監聽和模擬觸發操作。需要注意的是，為了讓到程式碼的邏輯更加清晰，這裡約定自訂事件帶有 'custom' 的前綴（例如：customTest，customAlert）。
/**
* @description 包含事件监听、移除和模拟事件触发的事件机制，支持链式调用
*
*/
(function( window, undefined ){
var Ev = window.Ev = window.$ = function(element){
return new Ev.fn.init(element);
};
// Ev 对象构建
Ev.fn = Ev.prototype = {
init: function(element){
this.element = (element && element.nodeType == 1)? element: document;
},
/**
* 添加事件监听
*
* @param {String} type 监听的事件类型
* @param {Function} callback 回调函数
*/
add: function(type, callback){
var _that = this;
if(_that.element.addEventListener){
/**
* @supported For Modern Browers and IE9+
*/
_that.element.addEventListener(type, callback, false);
} else if(_that.element.attachEvent){
/**
* @supported For IE5+
*/
// 自定义事件处理
if( type.indexOf('custom') != -1 ){
if( isNaN( _that.element[type] ) ){
_that.element[type] = 0;
}
var fnEv = function(event){
event = event ? event : window.event
if( event.propertyName == type ){
callback.call(_that.element);
}
};
_that.element.attachEvent('onpropertychange', fnEv);
// 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定
if( !_that.element['callback' + callback] ){
_that.element['callback' + callback] = fnEv;
}
// 标准事件处理
} else {
_that.element.attachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = callback;
}
return _that;
},
/**
* 移除事件监听
*
* @param {String} type 监听的事件类型
* @param {Function} callback 回调函数
*/
remove: function(type, callback){
var _that = this;
if(_that.element.removeEventListener){
/**
* @supported For Modern Browers and IE9+
*/
_that.element.removeEventListener(type, callback, false);
} else if(_that.element.detachEvent){
/**
* @supported For IE5+
*/
// 自定义事件处理
if( type.indexOf('custom') != -1 ){
// 移除对相应的自定义属性的监听
_that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
// 删除储存在 DOM 上的自定义事件的回调
_that.element['callback' + callback] = null;
// 标准事件的处理
} else {
_that.element.detachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = null;
}
return _that;
},
/**
* 模拟触发事件
* @param {String} type 模拟触发事件的事件类型
* @return {Object} 返回当前的 Kjs 对象
*/
trigger: function(type){
var _that = this;
try {
// 现代浏览器
if(_that.element.dispatchEvent){
// 创建事件
var evt = document.createEvent('Event');
// 定义事件的类型
evt.initEvent(type, true, true);
// 触发事件
_that.element.dispatchEvent(evt);
// IE
} else if(_that.element.fireEvent){
if( type.indexOf('custom') != -1 ){
_that.element[type]++;
} else {
_that.element.fireEvent('on' + type);
}
}
} catch(e){
};
return _that;
}
}
Ev.fn.init.prototype = Ev.fn;
})( window );測試案例1（自訂事件測試）
// 测试用例1（自定义事件测试）
// 引入事件机制
// ...
// 捕捉 DOM
var testBox = document.getElementById('testbox');
// 回调函数1
function triggerEvent(){
console.log('触发了一次自定义事件 customConsole');
}
// 回调函数2
function triggerAgain(){
console.log('再一次触发了自定义事件 customConsole');
}
// 封装
testBox = $(testBox);
// 同时绑定两个回调函数，支持链式调用
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);完整的程式碼在 Demo。
開啟Demo 後，在console 中呼叫testBox.trigger('customConsole') 自行觸發自訂事件，可以看到console 輸出兩個提示語，再輸入testBox.remove('customConsole', triggerAgain)移除對後一個監聽，這時再使用testBox.trigger('customConsole') 觸發自訂事件，可以看到console 只輸出一個提示語，即成功移除後一個監聽，至此事件機制所有功能正常工作。
以上內容就是JavaScript中的自訂事件編寫的基礎知識，希望能幫助大家。
相關推薦：
#以上是JavaScript中自訂事件編寫的基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！
