25

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

在 jQuery 中，这将非常简单：

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

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

4

3 回答 3

25

您可以创建自定义事件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}

更多信息可以在这里找到。

于 2013-09-04T12:25:40.883 回答
11

创建事件

要创建一个简单的事件，请使用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);

对于旧版浏览器（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

于 2013-09-04T12:38:08.920 回答
4

事件对象和一个额外的自定义参数

这对于原生 DOM 方法是不可能的。仅使用一个参数调用处理程序，即事件对象。因此，如果您需要传递任何数据，则需要将其设为事件对象的（自定义）属性。您可以为此使用 DOM4CustomEvent构造函数（有关跨浏览器 shim，请参阅 MDN 文档）。

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

于 2013-09-04T12:26:00.213 回答