javascript 带参数的触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18613456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger event with parameters
提问by andy
This is pretty annoying. I want to just trigger an event in javascript. I need to pass the event object into the parameters as usual and an additional custom parameter.
这很烦人。我只想在 javascript 中触发一个事件。我需要像往常一样将事件对象传递给参数和一个额外的自定义参数。
In jQuery, this would be super easy:
在 jQuery 中，这将非常简单：
$('#element').trigger('myevent', 'my_custom_parameter');
But I don't want to use this however. Every other question I have found relating to this has just suggested 'use jQuery!' It's for a plugin I'm developing and to require jQuery for one method is pretty silly. Can anyone point to a way to do the above in vanilla JS that's cross-browser compatible?
但是我不想使用这个。我发现的与此相关的所有其他问题都建议“使用 jQuery！” 它用于我正在开发的插件，并且需要 jQuery 用于一种方法是非常愚蠢的。任何人都可以指出一种在跨浏览器兼容的 vanilla JS 中执行上述操作的方法吗？
回答by Krasimir
You may create custom events http://jsfiddle.net/9eW6M/
您可以创建自定义事件http://jsfiddle.net/9eW6M/
HTML
HTML
<a href="#" id="button">click me</a>
JS
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);
});
Output after click on the link:
点击链接后的输出：
custom-event Object {custom_info: 10, custom_property: 20}
More information could be found here.
可以在此处找到更多信息。
回答by nedR
Creating an event
创建事件
To create a simple event, use the Eventconstructor.
要创建一个简单的事件，请使用Event构造函数。
var event = document.createEvent('MyEvent');
However, if you want to pass data along with the event use the CustomEventconstructor instead.
但是，如果您想将数据与事件一起传递，请改用CustomEvent构造函数。
var event = CustomEvent('MyEvent', { 'detail': 'Wow, my very own Event!' });
Dispatching the event
调度事件
You can then raise the event with targetElement.dispatchEvent.
然后，您可以使用 引发事件targetElement.dispatchEvent。
var elem =document.getElementById('myElement');
elem.dispatchEvent(event);
Catching the event
捕捉事件
elem.addEventListener('MyEvent', function (e) { console.log(e.detail); }, false);
For older browsers( Pre-IE9)
对于较旧的浏览器（IE9 之前）
You have to use the document.createEventfunction.
您必须使用该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);
Note that this method is deprecated and should only be used for compatibility purposes.
请注意，此方法已弃用，仅应用于兼容性目的。
更多帮助：https: //developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events：MDN：Creating_and_triggering_events
回答by Bergi
the event object and an additional custom parameter
事件对象和额外的自定义参数
That's impossible with the native DOM methods. Handlers are called with only one argument, which is the event object. So if there is any data you need to pass along, you need to make it a (custom) property of your event object. You might use the DOM4 CustomEventconstructorfor that (see the MDN docs for a cross-browser shim).
这对于原生 DOM 方法是不可能的。处理程序只用一个参数调用，即事件对象。因此，如果您需要传递任何数据，则需要将其设为事件对象的（自定义）属性。您可以为此使用 DOM4CustomEvent构造函数（请参阅 MDN 文档以获取跨浏览器垫片）。
Then use dispatchEventas you would normally with (custom or native) script-triggered events. For IE below 9, you seem to need to use fireEvent.
然后dispatchEvent像往常一样使用（自定义或本机）脚本触发的事件。对于低于 9 的 IE，您似乎需要使用fireEvent.
