詳解JavaScript中的自定義事件編寫
我們可以自定義事件來實(shí)現(xiàn)更靈活的開發(fā)，事件用好了可以是一件很強(qiáng)大的工具，基于事件的開發(fā)有很多優(yōu)勢(shì)（后面介紹）。
與自定義事件的函數(shù)有 Event、CustomEvent 和 dispatchEvent。
直接自定義事件，使用 Event 構(gòu)造函數(shù)：
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
CustomEvent 可以創(chuàng)建一個(gè)更高度自定義事件，還可以附帶一些數(shù)據(jù)，具體用法如下：
var myEvent = new CustomEvent(eventname, options);
其中 options 可以是：
{
detail: {
...
},
bubbles: true,
cancelable: false
}
其中 detail 可以存放一些初始化的信息，可以在觸發(fā)的時(shí)候調(diào)用。其他屬性就是定義該事件是否具有冒泡等等功能。
內(nèi)置的事件會(huì)由瀏覽器根據(jù)某些操作進(jìn)行觸發(fā)，自定義的事件就需要人工觸發(fā)。dispatchEvent 函數(shù)就是用來觸發(fā)某個(gè)事件：
element.dispatchEvent(customEvent);
上面代碼表示，在 element 上面觸發(fā) customEvent 這個(gè)事件。結(jié)合起來用就是：
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
使用自定義事件需要注意兼容性問題，而使用 jQuery 就簡單多了：
// 綁定自定義事件
$(element).on('myCustomEvent', function(){});
// 觸發(fā)事件
$(element).trigger('myCustomEvent');
此外，你還可以在觸發(fā)自定義事件時(shí)傳遞更多參數(shù)信息：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
JavaScript 自定義事件就是有別于如 click, submit 等標(biāo)準(zhǔn)事件的自行定制的事件，在敘述自定義事件有何好處之前，先來看一個(gè)自定義事件的例子：
<div id="testBox"></div>
// 創(chuàng)建事件
var evt = document.createEvent('Event');
// 定義事件類型
evt.initEvent('customEvent', true, true);
// 在元素上監(jiān)聽事件
var obj = document.getElementById('testBox');
obj.addEventListener('customEvent', function(){
console.log('customEvent 事件觸發(fā)了');
}, false);
具體效果可以查看 Demo，在 console 中輸入 obj.dispatchEvent(evt)，可以看到 console 中輸出“customEvent 事件觸發(fā)了”，表示自定義事件成功觸發(fā)。
在這個(gè)過程中，createEvent 方法創(chuàng)建了一個(gè)空事件 evt，然后使用 initEvent 方法定義事件的類型為約定好的自定義事件，再對(duì)相應(yīng)的元素進(jìn)行監(jiān)聽，接著，就是使用 dispatchEvent 觸發(fā)事件了。
沒錯(cuò)，自定義事件的機(jī)制如普通事件一樣——監(jiān)聽事件，寫回調(diào)操作，觸發(fā)事件后執(zhí)行回調(diào)。但不同的是，自定義事件完全由我們控制觸發(fā)時(shí)機(jī)，這就意味著實(shí)現(xiàn)了一種 JavaScript 的解耦。我們可以把多個(gè)關(guān)聯(lián)但邏輯復(fù)雜的操作利用自定義事件的機(jī)制靈活地控制好。
當(dāng)然，可能你已經(jīng)猜到了，上面的代碼在低版本的 IE 中并不生效，事實(shí)上在 IE8 及以下版本的 IE 中并不支持 createEvent()，而有 IE 私有的 fireEvent() 方法，但遺憾的是，fireEvent 只支持標(biāo)準(zhǔn)事件的觸發(fā)。因此，我們只能使用一個(gè)特殊而簡單的方法觸發(fā)自定義事件。
// type 為自定義事件，如 type = 'customEvent'，callback 為開發(fā)者實(shí)際定義的回調(diào)函數(shù)
obj[type] = 0;
obj[type]++;
obj.attachEvent('onpropertychange', function(event){
if( event.propertyName == type ){
callback.call(obj);
}
});
這個(gè)方法的原理實(shí)際上是在 DOM 中增加一個(gè)自定義屬性，同時(shí)監(jiān)聽元素的 propertychange 事件，當(dāng) DOM 的某個(gè)屬性的值發(fā)生改變時(shí)就會(huì)觸發(fā) propertychange 的回調(diào)，再在回調(diào)中判斷發(fā)生改變的屬性是否為我們的自定義屬性，若是則執(zhí)行開發(fā)者實(shí)際定義的回調(diào)。從而模擬了自定義事件的機(jī)制。
為了使到自定義事件的機(jī)制能配合標(biāo)準(zhǔn)事件的監(jiān)聽和模擬觸發(fā)，這里給出一個(gè)完整的事件機(jī)制，這個(gè)機(jī)制支持標(biāo)準(zhǔn)事件和自定義事件的監(jiān)聽，移除監(jiān)聽和模擬觸發(fā)操作。需要注意的是，為了使到代碼的邏輯更加清晰，這里約定自定義事件帶有 'custom' 的前綴（例如：customTest，customAlert）。
/**
* @description 包含事件監(jiān)聽、移除和模擬事件觸發(fā)的事件機(jī)制，支持鏈?zhǔn)秸{(diào)用
*
*/
(function( window, undefined ){
var Ev = window.Ev = window.$ = function(element){
return new Ev.fn.init(element);
};
// Ev 對(duì)象構(gòu)建
Ev.fn = Ev.prototype = {
init: function(element){
this.element = (element && element.nodeType == 1)? element: document;
},
/**
* 添加事件監(jiān)聽
*
* @param {String} type 監(jiān)聽的事件類型
* @param {Function} callback 回調(diào)函數(shù)
*/
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);
// 在元素上存儲(chǔ)綁定的 propertychange 的回調(diào)，方便移除事件綁定
if( !_that.element['callback' + callback] ){
_that.element['callback' + callback] = fnEv;
}
// 標(biāo)準(zhǔn)事件處理
} else {
_that.element.attachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = callback;
}
return _that;
},
/**
* 移除事件監(jiān)聽
*
* @param {String} type 監(jiān)聽的事件類型
* @param {Function} callback 回調(diào)函數(shù)
*/
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 ){
// 移除對(duì)相應(yīng)的自定義屬性的監(jiān)聽
_that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
// 刪除儲(chǔ)存在 DOM 上的自定義事件的回調(diào)
_that.element['callback' + callback] = null;
// 標(biāo)準(zhǔn)事件的處理
} else {
_that.element.detachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = null;
}
return _that;
},
/**
* 模擬觸發(fā)事件
* @param {String} type 模擬觸發(fā)事件的事件類型
* @return {Object} 返回當(dāng)前的 Kjs 對(duì)象
*/
trigger: function(type){
var _that = this;
try {
// 現(xiàn)代瀏覽器
if(_that.element.dispatchEvent){
// 創(chuàng)建事件
var evt = document.createEvent('Event');
// 定義事件的類型
evt.initEvent(type, true, true);
// 觸發(fā)事件
_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 );
測(cè)試用例1（自定義事件測(cè)試）
// 測(cè)試用例1（自定義事件測(cè)試）
// 引入事件機(jī)制
// ...
// 捕捉 DOM
var testBox = document.getElementById('testbox');
// 回調(diào)函數(shù)1
function triggerEvent(){
console.log('觸發(fā)了一次自定義事件 customConsole');
}
// 回調(diào)函數(shù)2
function triggerAgain(){
console.log('再一次觸發(fā)了自定義事件 customConsole');
}
// 封裝
testBox = $(testBox);
// 同時(shí)綁定兩個(gè)回調(diào)函數(shù)，支持鏈?zhǔn)秸{(diào)用
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);
完整的代碼在 Demo。
打開 Demo 后，在 console 中調(diào)用 testBox.trigger('customConsole') 自行觸發(fā)自定義事件，可以看到 console 輸出兩個(gè)提示語，再輸入 testBox.remove('customConsole', triggerAgain) 移除對(duì)后一個(gè)監(jiān)聽，這時(shí)再使用 testBox.trigger('customConsole') 觸發(fā)自定義事件，可以看到 console 只輸出一個(gè)提示語，即成功移除后一個(gè)監(jiān)聽，至此事件機(jī)制所有功能正常工作。
相關(guān)文章
JavaScript 學(xué)習(xí)筆記之操作符（續(xù)）
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符，今天我們繼續(xù)講解剩下的幾個(gè)操作符，包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號(hào)操作符，小伙伴們仔細(xì)研讀下吧，對(duì)提高自己對(duì)于javascript的理解很有幫助。2015-01-01
javascript對(duì)象之內(nèi)置對(duì)象Math使用方法
Math對(duì)象的一些方法能實(shí)現(xiàn)我們課本上的某些數(shù)學(xué)計(jì)算，比較常用的方法有如下幾個(gè)2010-04-04
在本篇文章里我們給大家分享了ajax與jsonp的區(qū)別的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2018-10-10
javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
利用js來動(dòng)態(tài)創(chuàng)建表格有兩種格式，appendChild()和insertRow、insertCell()。兩種方式其實(shí)差不多，但第一種有可能在IE上有問題，所以推薦大家使用第二種方法，看下面的解決和使用方法2013-12-12
這篇文章主要介紹了JavaScript中的pow()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript數(shù)字時(shí)鐘示例,需要的朋友可以參考下2014-04-04
在用戶體驗(yàn)過程中可能會(huì)出現(xiàn)這樣的情況：自定義打開新窗口的樣式,本文將介紹詳細(xì)的解決方法，需要了解的朋友可以參考下2012-12-12
javascript編程起步（第三課）...2007-02-02
這篇文章介紹了ES6基礎(chǔ)語法之Map和Set對(duì)象，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
本節(jié)是javascript語言的一個(gè)快速預(yù)覽，也是本書的第一部分快速預(yù)覽。有想閱讀此書的小伙伴，建議先讀下本系列文章。2015-02-02