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

我该怎么做呢?


当前回答

我只是使用了以下方法(似乎更简单):

element.blur();
element.focus();

在这种情况下,只有当值真的发生改变时才会触发事件,就像由用户执行的正常焦点轨迹丢失会触发它一样。

其他回答

注意: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);
}

我只是使用了以下方法(似乎更简单):

element.blur();
element.focus();

在这种情况下,只有当值真的发生改变时才会触发事件,就像由用户执行的正常焦点轨迹丢失会触发它一样。

你想要的是这样的:

document.getElementByClassName("example").click();

使用jQuery,它是这样的:

$(".example").trigger("click");

只是建议一个不需要手动调用监听器事件的替代方案:

无论您的事件侦听器做什么,都要将其移动到一个函数中,并从事件侦听器调用该函数。

然后,您还可以在需要完成与事件触发时相同的事情的其他任何地方调用该函数。

我发现这种方法不那么“代码密集”,也更容易阅读。

一个工作的例子:

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