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

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

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

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

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

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

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

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

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

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

希望这能有所帮助!

一个工作的例子:

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