我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。

我该怎么做呢?


当前回答

一个工作的例子:

// 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。

其他回答

修改@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

值得注意的是,我们可以创建任何类型的预定义事件,并在任何地方收听。

我们并不局限于经典的内置事件。

在这个基本示例中,自定义事件interfacebuiltsuccessuserdefinedevent每3秒在self.document上分派一次

self.document。addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() =>{//测试 self.document。dispatchEvent(新事件(interfacebuiltsuccessuserdefinedevent)) }, 3000) //测试

有趣的事实:元素可以侦听尚未创建的事件。

如果你不想使用jQuery,也不特别关心向后兼容性,可以使用:

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

请在这里和这里查看文档。

编辑:根据你的设置,你可能想要添加气泡:true:

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

最有效的方法是直接调用已经注册到addEventListener的相同函数。

您还可以使用CustomEvent和co触发一个假事件。

最后,一些元素如<input type="file">支持.click()方法。

HTML

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

JS

// click event listener of the link element --------------  
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById('myLink').click();      // script calls the "click" event of the link element 
}