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

我该怎么做呢?


当前回答

如果你使用jQuery,你可以简单做到

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

然后用

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

[arg0, arg1,…], argN]表示这些参数是可选的。

其他回答

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

element.blur();
element.focus();

在这种情况下,只有当值真的发生改变时才会触发事件,就像由用户执行的正常焦点轨迹丢失会触发它一样。

你想要的是这样的:

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

希望这能有所帮助!

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

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

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

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

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