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

我该怎么做呢?


当前回答

接受的答案不适合我,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

其他回答

一个工作的例子:

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

你想要的是这样的:

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

使用jQuery,它是这样的:

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

你可以使用我一起编译的这个函数。

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

希望这能有所帮助!

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 
}