event = new Event(typeArg[, eventInit]) 创建一个新的 Event 对象
typeArg 字符串类型，表示所创建事件的名称
eventInit 对象类型，接受以下字段
bubbles 可选，表示该事件是否冒泡，默认值为 false
cancelable 可选，表示该事件能否被取消，默认值为 false
composed 可选，指示事件是否会在影子DOM根节点之外触发侦听器，默认值为 false
event = new CustomEvent(typeArg[, customEventInit]) 创建一个新的 CustomEvent 对象，可以传递自定义数据
typeArg 字符串类型，表示所创建事件的名称
customEventInit 对象类型，接受以下字段
bubbles 可选，表示该事件是否冒泡，默认值为 false
cancelable 可选，表示该事件能否被取消，默认值为 false
detail 可选，任意类型。事件处理器可以通过 event.detail 的形式访问它
UI 事件构造函数允许接受特定于该事件类型的属性，例如，鼠标事件的 clientX
UIEvent（用户界面事件）
MouseEvent（鼠标事件）
TouchEvent（触摸事件）
WheelEvent（滚轮事件）
InputEvent（输入事件）
KeyboardEvent（键盘事件）
FocusEvent（焦点事件）
ProgressEvent（进度事件）
CompositionEvent（处理用户间接输入文字的事件）
EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器
Element，document 和 window 是最常见的事件目标，但是其他对象也可以是事件目标，比如XMLHttpRequest，AudioNode，AudioContext 等等
许多事件目标（包括元素，文档和 window）还支持通过 on... 属性和属性设置事件处理程序
var myEventTarget = new EventTarget() 创建一个新的 EventTarget 对象
eventTarget.addEventListener() 将指定的监听器注册到 eventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行
eventTarget.removeEventListener() 删除使用 eventTarget.addEventListener() 添加的事件
cancelled = !eventTarget.dispatchEvent(event) 向一个指定的事件目标派发一个事件，并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则(包括事件捕获和可选的冒泡过程)同样适用于通过手动的使用dispatchEvent()方法派发的事件
当该事件是可取消的(cancelable为true)并且至少一个该事件的事件处理方法调用了event.preventDefault()，则返回值为false；否则返回true
创建自定义事件，可以使用 Event 构造函数创建如下：
// Listen for the event.
elem.addEventListener('build', function (e) { }, false);
var event = new Event('build');
// var event = new Event("build", { bubbles: true, cancelable: false }); // 创建一个支持冒泡且不能被取消的build事件
// Dispatch the event.
elem.dispatchEvent(event);
向事件对象添加自定义数据，可以使用 CustomEvent，detail 属性用于传递自定义数据
var event = new CustomEvent('build', { detail: elem.dataset.time });
// 在事件监听器中访问自定义数据
function eventHandler(e) {
console.log('The time is: ' + e.detail);
}
绑定事件在 EventTarget 对象实例
let myEventTarget = new EventTarget();
myEventTarget.addEventListener("foo", function(e) {
console.log(e.detail);
});
let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
触发内置事件
// 向window派发一个resize内置事件
window.dispatchEvent(new Event('resize'));
var event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
clientX: 100,
clientY: 100
});
var cb = document.getElementById('checkbox');
var cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// A handler called preventDefault.
console.log("cancelled");
} else {
// None of the handlers called preventDefault.
console.log("not cancelled");
}
网友评论