如何在JavaScript中触发事件?

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

我该怎么做呢?

当前回答

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

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

希望这能有所帮助!

2018-09-06 16:00:21

其他回答

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

2010-03-22 08:55:01

注意:initCustomEvent方法现在已弃用。其他回答功能最新的和建议的做法。

如果您支持IE9+，您可以使用以下。在《你可能不需要jQuery》中也包含了同样的概念。

如果您已经在使用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 " > < /脚本>

2016-03-17 14:09:37

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

2016-07-02 01:49:07

我只是使用了以下方法(似乎更简单):