本文仅是为了备查。
如何在网页Javascript中创建、发送并处理自定义事件呢？这些事件通常称为合成事件，而不是浏览器本身触发的事件。
创建自定义事件
Events 可以使用 Event构造函数创建如下：
var event = newEvent('build'); // Listen for the event.
elem.addEventListener('build',function(e){...},false); // Dispatch the event.
elem.dispatchEvent(event);
上述代码使用了EventTarget.dispatchEvent()方法。
绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 这是最新推荐的在Javascript中使用自定义时间的方法，比较简单，可以参考后面的旧方法就可以对比出来。
添加自定义数据 – CustomEvent()
要向事件对象添加更多数据，以便做进一步分析处理，可以使用CustomEvent接口，detail 属性可用于传递自定义数据。
例如，event 可以创建如下：
var event = newCustomEvent('build',{'detail':elem.dataset.time});
下面的代码允许你在事件监听器中访问更多的数据：
function eventHandler(e) {log('The time is: '+e.detail);}
过时的方式
早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：
// Create the event.
var event = document.createEvent('Event'); // Define that the event name is 'build'.
event.initEvent('build',true,true); // Listen for the event.
document.addEventListener('build',function(e){ // e.target matches document from above
},false); // target can be any Element or other EventTarget.
document.dispatchEvent(event);
可以看出，复杂了一些。
事件冒泡
通常需要从子元素触发事件，并让它的上级元素捕获它：
<form>
<textarea></textarea>
</form>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea'); // Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
const eventAwesome = newCustomEvent('awesome', {bubbles:true, detail:{text:()=>textarea.value}}); // The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener('awesome', e=>console.log(e.detail.text())); // As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener('input', e=>e.target.dispatchEvent(eventAwesome));
动态创建和派发事件
元素可以侦听尚未创建的事件：
<form>
<textarea></textarea>
</form>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
form.addEventListener('awesome', e=>console.log(e.detail.text()));
textarea.addEventListener('input',function() { // Create and dispatch/trigger an event on the fly// Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
this.dispatchEvent(newCustomEvent('awesome', {bubbles:true,detail:{text:()=>textarea.value}}))
});
触发内置事件
下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。
function simulateClick() {
var event = newMouseEvent('click', {'view':window, 'bubbles':true, 'cancelable':true});
var cb = document.getElementById('checkbox');
var cancelled = !cb.dispatchEvent(event);
if (cancelled) { // A handler called preventDefault.
alert("cancelled");
} else { // None of the handlers called preventDefault.
alert("not cancelled");
}
}
