CustomEvent自定义事件

　　javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的，其实通过javascript我们可以在任何时刻触发特定的事件，并且这些事件与浏览器创建的事件是相同的。

　　通过createEvent方法，我们可以创建新的Event对象，这个方法接受一个参数eventType，即想获取的Event对象的事件模板名，其值可以为HTMLEvents、MouseEvents、UIEvents以及CustomEvent(自定义事件)。这里我们将以CustomEvent为例子进行讲解。

(1)首先创建自定义事件对象

　　var event = document.createEvent("CustomEvent");

(2)然后初始化事件对象

　　event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

　　其中，第一个参数为要处理的事件名

　　第二个参数为表明事件是否冒泡

　　第三个参数为表明是否可以取消事件的默认行为

　　第四个参数为细节参数

　　例如：event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test，事件冒泡，可以取消事件的默认行为，细节参数为一个对象{a:"test", b:"success"}

　　或者：

var event = new CustomEvent('test', {
    bubbles: true,
    cancelable: true,
    detail: 'xxx',
});

(3)最后触发事件对象

　　document.dispatchEvent(event);

(4)当然我们需要定义监控test事件的处理程序

　　document.addEventListener("test", function(e){

　　　　var obj = e.detail;

　　　　alert(obj.a + "  " + obj.b);

　　});

　　最后会弹出框显示"test success"

转载于:https://www.cnblogs.com/xinxingyu/p/5688817.html