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

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

希望这能有所帮助!

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

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

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

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

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'

注意: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版本。

$(函数(){ //添加事件监听器 美元(文档)。on('customChangeEvent'，函数(e, opts) { $('体'). html (opts.detail); })； //触发事件 美元(文档)。触发(customChangeEvent, { detail: '显示在触发器…' })； })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本>

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 
}

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

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

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

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

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