事件抛发

在js中，我们正常所熟知的绑定事件的方式有两种：

方式1 - 给DOM对象的onclick属性赋值一个函数：

document.onclick = function(){
    console.log("点击了文档");
}
// 或
document.onclick = myClick;
function myClick(){
    console.log("点击了文档");
}

方式2 - 使用事件侦听器来绑定事件：

document.addEventListener("click",function(){
    console.log("点击了文档");
});
// 或
document.addEventListener("click",myClick);
function myClick(){
    console.log("点击了文档");
}

其实事件还有一种绑定方式，可以给DOM对象绑定任意自定义的事件，即事件抛发：

var evt = new Event("myEvent"); // 创建事件对象
document.addEventListener("myEvent",myFunc); // 绑定自定义事件
function myFunc(){
    console.log("这是自定义事件myEvent执行的函数");
}
document.dispatch(evt); // 将绑定的事件抛发 - 手动触发

这种方式虽然看起来繁琐了一点，但是无形中强大了事件绑定，因为可以绑定自定义事件。

这个过程不太好理解，我举一个例子：

DOM对象在使用事件侦听器的时候，相当于竖起了一个耳朵，在用力地听一段声音，而且这个耳朵是一个残次品，只能听到某一个频段的声音：

document.addEventListener("myEvent",myFunc);

这个代码相当于是竖起了耳朵，这个耳朵只能听到myEvent这个频段的声音，用力要听到这段声音。

var evt = new Event("myEvent");

这段代码相当于制造了一段声音，是myEvent这个频段的声音。

document.dispatch(evt)；

这段代码相当于将制造好的声音扔给了耳朵，耳朵就能听到这段声音，然后执行myFunc这个函数。

这就是抛发事件。

注意：DOM对象之所以能绑定事件并抛发事件，是由于DOM对象继承自EventTarget这个类，其实addEventListener、removeEventListener以及dispatch这三个方法都是EventTarget这个类的方法，所以在使用这三个方法的时候要确定一下对象是继承自EventTarget这个类的。