Javascript CustomEvent

Javascript CustomEvent

　　原文链接 https://davidwalsh.name/customevent，看到一篇介绍自定义事件的文章 翻译一下，不足之处，还请指正。

 

　　自浏览器诞生以来，javascript event一直是用户交互的方式。调用事件不仅告诉了我们发生了什么，而且告诉了我们是什么类型的交互，设计的DOM节点，还有事件调用的方法。创建并调用自定义事件是一个很棘手的事情。用javascript的自定义时间的API可以消除这些问题。CustomEvent API 不仅允许开发者自定义事件，而且在节点上触发他们。最重要的是这个API超级简单.

　　The Javascript

　　当时用自定义事件的时候，有两个参数(组件)需要被“定制”:1,自定义事件的名称。2触发这个事件所做的事情(回调函数).给一个元素添加一个事件处理程序，一切照旧。

　　

myElement.addEventListener("userLogin", function(e) {
    console.info("Event is: ", e);
    console.info("Custom data is: ", e.detail);
})

　　这里我们添加了一个 userLogin 事件，就像我们添加mouseover 事件一样简单，这没有什么特别的。特殊的部分是创建和触发自定义事件.

// First create the event
var myEvent = new CustomEvent("userLogin", {
    detail: {
        username: "davidwalsh"
    }
});

// Trigger it!
myElement.dispatchEvent(myEvent);

　　new一个CustomEvent构造函数的实例允许你通过两个特殊的属性事件名称和数量来创建自定义事件。dispatchEvent触发事件在给定的元素。让我们通过两个参数bubbling, cancelable来触发自定义事件。

　　参数如下:

var myEvent = new CustomEvent("userLogin", {
    detail: {
        username: "davidwalsh"
    },
    bubbles: true,
    cancelable: false
});

　　通过自定义数据来创建自定义事件难以置信的有用，你不仅可以创建你自己约定命名的自定义事件，而且可以传递自定义数据。你可以查看https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent确保浏览器的支持，但是这个API只有最新的浏览器才可以使用。