Question

这很烦人。我想在javascript中触发一个事件。我需要像往常一样将事件对象传递给参数和一个额外的自定义参数。

在jQuery中，这将非常简单：

$('#element').trigger('myevent', 'my_custom_parameter');

但我不想用这个。我发现的与此相关的其他问题只是建议“使用jQuery！”这是我正在开发的插件，并且要求jQuery用于一种方法非常愚蠢。任何人都可以指出一种在跨浏览器兼容的vanilla JS中执行上述操作的方法吗？

Answer 1

您可以创建自定义事件http://jsfiddle.net/9eW6M/

HTML

<a href="#" id="button">click me</a>

JS

var button = document.getElementById("button");
button.addEventListener("custom-event", function(e) {
    console.log("custom-event", e.detail);
});
button.addEventListener("click", function(e) {
    var event = new CustomEvent("custom-event", {'detail': {
        custom_info: 10,
        custom_property: 20
    }});
    this.dispatchEvent(event);
});

点击链接后输出：

custom-event Object {custom_info: 10, custom_property: 20}

可以找到更多信息here。

Answer 2

创建活动

要创建简单事件，请使用Event构造函数。

var event = document.createEvent('MyEvent');

但是，如果要将数据与事件一起传递，请使用CustomEvent构造函数。

var event = CustomEvent('MyEvent', { 'detail': 'Wow, my very own Event!' });

调度事件

然后，您可以使用targetElement.dispatchEvent举报活动。

var elem =document.getElementById('myElement');
elem.dispatchEvent(event);

捕捉活动

elem.addEventListener('MyEvent', function (e) { console.log(e.detail); }, false);

对于旧版浏览器（Pre-IE9）

您必须使用document.createEvent功能。

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('MyEvent', true, true);

//Any Element can dispatch the event
elem.dispatchEvent(event);

请注意，此方法已弃用，只能用于兼容性目的。

更多帮助：https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events: MDN: Creating_and_triggering_events

Answer 3

事件对象和其他自定义参数

使用原生DOM方法是不可能的。只使用一个参数调用处理程序，该参数是事件对象。因此，如果您需要传递任何数据，则需要将其设置为事件对象的（自定义）属性。您可以使用DOM4 CustomEvent constructor（请参阅跨浏览器填充程序的MDN文档）。

然后像通常使用（自定义或本机）脚本触发的事件一样使用dispatchEvent。对于低于9的IE，您似乎需要使用fireEvent。

带参数的触发事件

3 个答案:

创建活动

调度事件

捕捉活动

对于旧版浏览器（Pre-IE9）