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

我该怎么做呢?


当前回答

你可以使用下面的代码来使用Element方法触发事件:

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

if (!Element.prototype.triggerEvent) { Element.prototype.triggerEvent = function (eventName) { var event; if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventName, true, true); } else { event = document.createEventObject(); event.eventType = eventName; } event.eventName = eventName; if (document.createEvent) { this.dispatchEvent(event); } else { this.fireEvent("on" + event.eventType, event); } }; } var input = document.getElementById("my_input"); var button = document.getElementById("my_button"); input.addEventListener('change', function (e) { alert('change event fired'); }); button.addEventListener('click', function (e) { input.value = "Bye World"; input.triggerEvent("change"); }); <input id="my_input" type="input" value="Hellow World"> <button id="my_button">Change Input</button>

其他回答

var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

这将立即触发一个事件'beforeinstallprompt'

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

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

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

最后,一些元素如<input type="file">支持.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。

你可以使用下面的代码来使用Element方法触发事件:

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

if (!Element.prototype.triggerEvent) { Element.prototype.triggerEvent = function (eventName) { var event; if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventName, true, true); } else { event = document.createEventObject(); event.eventType = eventName; } event.eventName = eventName; if (document.createEvent) { this.dispatchEvent(event); } else { this.fireEvent("on" + event.eventType, event); } }; } var input = document.getElementById("my_input"); var button = document.getElementById("my_button"); input.addEventListener('change', function (e) { alert('change event fired'); }); button.addEventListener('click', function (e) { input.value = "Bye World"; input.triggerEvent("change"); }); <input id="my_input" type="input" value="Hellow World"> <button id="my_button">Change Input</button>