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

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

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

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

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

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

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

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

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 
}

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

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

希望这能有所帮助!

注意: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 " > < /脚本>