如何在 JavaScript 中触发事件？

Question

我已使用addEventListener将事件附加到文本框。 它工作正常。 当我想从另一个 function 以编程方式触发事件时，我的问题出现了。

我该怎么做？

Answer 1

注意：现在不推荐使用initEvent方法。 其他答案具有最新和推荐的做法。

---

您可以在IE 8或更低版本上使用fireEvent ，在大多数其他浏览器上使用 W3C 的dispatchEvent 。 要创建要触发的事件，可以根据浏览器使用createEvent或createEventObject 。

这是一段不言自明的代码（来自原型），它触发element上dataavailable的事件数据：

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);
}

Answer 2

一个工作示例：

// 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);

对于较旧的浏览器polyfill和更复杂的示例，请参阅MDN 文档。

请参阅EventTarget.dispatchEvent和CustomEvent的支持表。

Answer 3

如果您不想使用 jQuery 并且不特别关心向后兼容性，只需使用：

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

请参阅此处和此处的文档。

编辑：根据您的设置，您可能想要添加bubbles: true ：

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

Answer 4

如果你使用 jQuery，你可以简单地做

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

并处理它

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

其中 "[arg0, arg1,..., argN]" 表示这些参数是可选的。

Answer 5

注意：现在不推荐使用initCustomEvent方法。 其他答案具有最新和推荐的做法。

---

如果您支持 IE9+，您可以使用以下内容。 您可能不需要 jQuery中包含相同的概念。

 function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } } function triggerEvent(el, eventName, options) { var event; if (window.CustomEvent) { event = new CustomEvent(eventName, options); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, options); } el.dispatchEvent(event); } // Add an event listener. addEventListener(document, 'customChangeEvent', function(e) { document.body.innerHTML = e.detail; }); // Trigger the event. triggerEvent(document, 'customChangeEvent', { detail: 'Display on trigger...' });

---

如果您已经在使用 jQuery，这里是上面代码的 jQuery 版本。

 $(function() { // Add an event listener. $(document).on('customChangeEvent', function(e, opts) { $('body').html(opts.detail); }); // Trigger the event. $(document).trigger('customChangeEvent', { detail: 'Display on trigger...' }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 6

我使用 JavaScript 搜索了鼠标悬停时触发 click、mousedown 和 mouseup 事件。 我找到了Juan Mendes提供的答案。 答案请点击这里。

点击这里是现场演示，下面是代码：

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Answer 7

接受的答案对我不起作用， createEvent 都没有。

最后对我有用的是：

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

这是一个片段：

 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

Answer 8

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

Answer 9

只是建议一种不需要手动调用侦听器事件的替代方案：

无论您的事件监听器做什么，将其移动到 function 并从事件监听器调用 function。

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

我发现这不那么“代码密集”并且更容易阅读。

Answer 10

我只是使用了以下（似乎更简单）：

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

在这种情况下，仅当值真正更改时才会触发事件，就像您通过用户执行的正常焦点轨迹丢失触发它一样。

Answer 11

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

Answer 12

您可以使用我一起编译的这个 function。

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + ' fired!'});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent('HTMLEvents');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent('on'+event.eventType, event);
            }
        }
    }
  }

触发以下事件：

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

观看活动：

dest.addEventListener('focus', function(e){
   console.log(e);
});

希望这可以帮助

Answer 13

您可以使用以下代码使用 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>

Answer 14

最有效的方法是直接调用已经注册到addEventListener的同一个 function。

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

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

Answer 15

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'

Answer 16

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

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

在这个基本示例中，每 3 秒在 self.document 上调度一个自定义事件interfacebuiltsuccessuserdefinedevent self.document

 self.document.addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() => { // Test self.document.dispatchEvent(new Event('interfacebuiltsuccessuserdefinedevent')) }, 3000 ) // Test

有趣的事实： elements可以监听尚未创建的事件。

Answer 17

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 
}

Answer 18

使用 jquery 事件调用。 在您要触发任何元素的 onChange 的地方写下下面的行。

$("#element_id").change();

element_id是要触发其 onChange 的元素的 ID。

避免使用

 element.fireEvent("onchange");

因为它的支持非常少。 请参阅此文档以获得支持。

Answer 19

你想要的是这样的：

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

使用 jQuery，它会是这样的：

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