带参数的触发事件

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} 

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

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 方法来说是不可能的。调用处理程序时仅使用一个参数，即事件对象。因此，如果需要传递任何数据，则需要将其设为事件对象的（自定义）属性。您可以为此使用 DOM4CustomEvent构造函数（有关跨浏览器填充程序，请参阅 MDN 文档）。

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