jquery 自定义事件的创建、触发、冒泡例子

1、事件类别

暂且不深入的说明JS的事件是如何注册和触发的，本文就浅显的将JS事件表面的了解下。在浏览器事件（事件都与JS有关，事件是为JS脚本服务的）中，最顶层的事件构造函数为Event，其他事件都是由Event派生出来的。

派生出的事件有：

AnimationEvent
AudioProcessingEvent
BeforeInputEvent
BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CSSFontFaceLoadEvent
CustomEvent
DeviceLightEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
DOMTransactionEvent
DragEvent
EditingBeforeInputEvent
ErrorEvent
FocusEvent
GamepadEvent
HashChangeEvent
IDBVersionChangeEvent
KeyboardEvent
MediaStreamEvent
MessageEvent
MouseEvent
MutationEvent
OfflineAudioCompletionEvent
PageTransitionEvent
PointerEvent
PopStateEvent
ProgressEvent
RelatedEvent
RTCPeerConnectionIceEvent
SensorEvent
StorageEvent
SVGEvent
SVGZoomEvent
TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
UserProximityEvent
WheelEvent
2、创建事件
2.1、使用Event构造函数来创建事件：

// 事件监听一个自定义事件 hello
document.addEventListener('hello', function(){
 alert('I'm here!');
});
// 创建事件
var event = new Event('hello');
// 触发事件
document.dispatchEvent(event);
事件回调里，都会有传递一个event参数，可以看看：

注意红色方框中的部分，该事件有是否冒泡、事件目标、事件类型以及事件的原型方法，与浏览器默认的事件几乎无异。

创建自定义事件，还有其他方式，分别是：

2.2、使用CustomeEvent构造函数：

var event = new CustomEvent('hello2', {
    // 是否冒泡
    bubbles: true,
    // 是否可以被取消
    cancelable: true,
    // 自定义属性
    detail:{
        text: 'hello world',
    }
});
 
// 标准属性
event.clientX = 100;
event.clientY = 200;
2.3、使用createEvent方法：

var event = document.createEvent('Events');
// 初始化事件
// 参数1：事件类型
// 参数2：是否冒泡
// 参数3：是否可以取消
// 还有其他参数，这里不赘述了
event.initEvent('hello', true, true);
 
// 标准属性
event.clientX = 100;
event.clientY = 200;
 
// 自定义属性
event.detail = {
    text: 'hello world',
};
3、事件属性
标准的事件属性有：clientX、clientY、pageX、pageY、screenX、screenY等，上图并没有这些东西，我们可以手动加上去。

在实例化一个新的事件的时候，我们可以手动加上事件的是否冒泡、是否可以被取消等关键信息，这些信息是不可被二次修改的，因此必须在实例化的时候赋值。

// 创建事件
var event = new Event('hello', {
 // 是否冒泡
 bubbles: true,
 // 是否可以被取消
 cancelable: true
});
// 标准事件属性
event.clientX = 100;
event.clientY = 200;
// 自定义事件属性
event.detail = {
 text: 'hello world',
};