我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
当前回答
修改@Dorian对IE工作的回答:
document.addEventListener("my_event", function(e) {
console.log(e.detail);
});
var detail = 'Event fired';
try {
// For modern browsers except IE:
var event = new CustomEvent('my_event', {detail:detail});
} catch(err) {
// If IE 11 (or 10 or 9...?) do it this way:
// Create the event.
var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('my_event', true, true);
event.detail = detail;
}
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
小提琴:https://jsfiddle.net/z6zom9d0/1/
参见: https://caniuse.com/#feat=customevent
其他回答
接受的答案不适合我,createEvent的都不行。
最后对我有用的是:
targetElement.dispatchEvent(
new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}));
Here’s a snippet: const clickBtn = document.querySelector('.clickme'); const viaBtn = document.querySelector('.viame'); viaBtn.addEventListener('click', function(event) { clickBtn.dispatchEvent( new MouseEvent('click', { bubbles: true, cancelable: true, view: window, })); }); clickBtn.addEventListener('click', function(event) { console.warn(`I was accessed via the other button! A ${event.type} occurred!`); }); <button class="clickme">Click me</button> <button class="viame">Via me</button>
从阅读: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
值得注意的是,我们可以创建任何类型的预定义事件,并在任何地方收听。
我们并不局限于经典的内置事件。
在这个基本示例中,自定义事件interfacebuiltsuccessuserdefinedevent每3秒在self.document上分派一次
self.document。addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() =>{//测试 self.document。dispatchEvent(新事件(interfacebuiltsuccessuserdefinedevent)) }, 3000) //测试
有趣的事实:元素可以侦听尚未创建的事件。
我只是使用了以下方法(似乎更简单):
element.blur();
element.focus();
在这种情况下,只有当值真的发生改变时才会触发事件,就像由用户执行的正常焦点轨迹丢失会触发它一样。
一个工作的例子:
// Add an event listener
document.addEventListener("name-of-event", function(e) {
console.log(e.detail); // Prints "Example of an event"
});
// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
对于较旧的浏览器填充和更复杂的示例,请参阅MDN文档。
请参阅EventTarget的支持表。dispatchEvent和CustomEvent。
注意:initEvent方法现在已弃用。其他回答功能最新的和建议的做法。
你可以在ie8或更低版本上使用fireEvent,在大多数其他浏览器上使用W3C的dispatchEvent。要创建想要触发的事件,可以根据浏览器使用createEvent或createEventObject。
下面是一段不言自明的代码(来自原型),它可以触发元素上可用的事件数据:
var event; // The custom event that will be created
if(document.createEvent){
event = document.createEvent("HTMLEvents");
event.initEvent("dataavailable", true, true);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}