除了浏览器预定义的那些事件,用户还可以自定义事件,然后手动触发。
// 新建事件实例
var event = new Event('build');
// 添加监听函数
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件
elem.dispatchEvent(event);
上面代码触发了自定义事件,该事件会层层向上冒泡。在冒泡过程中,如果有一个元素定义了该事件的监听函数,该监听函数就会触发。
由于IE不支持这个API,如果在IE中自定义事件,需要使用后文的“老式方法”。
##CustomEvent()
Event构造函数只能指定事件名,不能在事件上绑定数据。如果需要在触发事件的同时,传入指定的数据,需要使用CustomEvent构造函数生成自定义的事件对象。
var event = new CustomEvent('build', { 'detail': 'hello' });
function eventHandler(e) {
console.log(e.detail);
}
上面代码中,CustomEvent构造函数的第一个参数是事件名称,第二个参数是一个对象,该对象的detail属性会绑定在事件对象之上。
下面是另一个例子。
var myEvent = new CustomEvent("myevent", {
detail: {
foo: "bar"
},
bubbles: true,
cancelable: false
});
el.addEventListener('myevent', function(event) {
console.log('Hello ' + event.detail.foo);
});
el.dispatchEvent(myEvent);
IE不支持这个方法,可以用下面的垫片函数模拟。
(function () {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
###事件的模拟
有时,需要在脚本中模拟触发某种类型的事件,这时就必须使用这种事件的构造函数。
下面是一个通过MouseEvent构造函数,模拟触发click鼠标事件的例子。
function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}
##自定义事件的老式写法
老式浏览器不一定支持各种类型事件的构造函数。因此,有时为了兼容,会用到一些非标准的方法。这些方法未来会被逐步淘汰,但是目前浏览器还广泛支持。除非是为了兼容老式浏览器,尽量不要使用。
###(1)document.createEvent()
document.createEvent方法用来新建指定类型的事件。它所生成的Event实例,可以传入dispatchEvent方法。
// 新建Event实例
var event = document.createEvent('Event');
// 事件的初始化
event.initEvent('build', true, true);
// 加上监听函数
document.addEventListener('build', doSomething, false);
// 触发事件
document.dispatchEvent(event);
createEvent方法接受一个字符串作为参数,可能的值参见下表“数据类型”一栏。使用了某一种“事件类型”,就必须使用对应的事件初始化方法。
事件类型 事件初始化方法
UIEvents event.initUIEvent
MouseEvents event.initMouseEvent
MutationEvents event.initMutationEvent
HTMLEvents event.initEvent
Event event.initEvent
CustomEvent event.initCustomEvent
KeyboardEvent event.initKeyEvent
###(2)event.initEvent()
事件对象的initEvent方法,用来初始化事件对象,还能向事件对象添加属性。该方法的参数必须是一个使用Document.createEvent()生成的Event实例,而且必须在dispatchEvent方法之前调用。
var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true, {foo:'bar'});
someElement.dispatchEvent(event);
initEvent方法可以接受四个参数。
type:事件名称,格式为字符串。
bubbles:事件是否应该冒泡,格式为布尔值。可以使用event.bubbles属性读取它的值。
cancelable:事件是否能被取消,格式为布尔值。可以使用event.cancelable属性读取它的值。
option:为事件对象指定额外的属性。
##事件模拟的老式写法
事件模拟的非标准做法是,对document.createEvent方法生成的事件对象,使用对应的事件初始化方法进行初始化。比如,click事件对象属于MouseEvent对象,也属于UIEvent对象,因此要用initMouseEvent方法或initUIEvent方法进行初始化。
###(1)event.initMouseEvent()
initMouseEvent方法用来初始化Document.createEvent方法新建的鼠标事件。该方法必须在事件新建(document.createEvent方法)之后、触发(dispatchEvent方法)之前调用。
initMouseEvent方法有很长的参数。
event.initMouseEvent(type, canBubble, cancelable, view,
detail, screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, relatedTarget
);
上面这些参数的含义,参见MouseEvent构造函数的部分。模仿并触发click事件的写法如下。
var simulateDivClick = document.createEvent('MouseEvents');
simulateDivClick.initMouseEvent('click',true,true,
document.defaultView,0,0,0,0,0,false,
false,false,0,null,null
);
divElement.dispatchEvent(simulateDivClick);
##2)UIEvent.initUIEvent()
UIEvent.initUIEvent()用来初始化一个UI事件。该方法必须在事件新建(document.createEvent方法)之后、触发(dispatchEvent方法)之前调用。
event.initUIEvent(type, canBubble, cancelable, view, detail)
该方法的参数含义,可以参见MouseEvent构造函数的部分。其中,detail参数是一个数值,含义与事件类型有关,对于鼠标事件,这个值表示鼠标按键在某个位置按下的次数。
var e = document.createEvent("UIEvent");
e.initUIEvent("click", true, true, window, 1);