如何在 JavaScript 中触发事件？

Posted

技术标签:

【中文标题】如何在 JavaScript 中触发事件？【英文标题】：How to trigger event in JavaScript? 【发布时间】：2011-01-30 06:06:55 【问题描述】：

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

我该怎么做？

【问题讨论】：

Mozilla 有一篇很好的文章解释了Creating and triggering events in javascript。希望对您有所帮助！ 请将接受的答案更改为this，它是最新的。 @RickyStam 好像那个MDN文章moved to here 【参考方案1】：

注意：initCustomEvent 方法现已弃用。其他答案是最新的和推荐的做法。

如果您支持 IE9+，您可以使用以下内容。 You Might Not Need 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 版本。

$(function() 
  // Add an event listener.
  $(document).on('customChangeEvent', function(e, opts) 
    $('body').html(opts.detail);
  );

  // Trigger the event.
  $(document).trigger('customChangeEvent', 
    detail: 'Display on trigger...'
  );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

这不适用于任何版本的 IE，因为 window.CustomEvent 存在但不能作为构造函数调用：caniuse.com/#search=CustomEvent ;)【参考方案2】：

注意：initEvent 方法现已弃用。其他答案是最新的和推荐的做法。

您可以在 IE 8 或更低版本上使用fireEvent，在大多数 其他浏览器上使用 W3C 的 dispatchEvent。要创建要触发的事件，您可以使用createEvent 或createEventObject，具体取决于浏览器。

这是一段不言自明的代码（来自原型），它在 element 上触发事件 dataavailable：

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

【讨论】：

别忘了只有IE版本前面有'on'（我一开始没看） 变量eventName在这里包含什么？ 是的，dataavailable 应该在 eventName 中，并且也应该定义 memo（定义为 即可）。 Internet Explorer 9+ 处理 createEvent 和 dispatchEvent，因此不需要那些 if 语句。 这个例子根本行不通，看我的回答：***.com/a/20548330/407213【参考方案3】：

接受的答案对我不起作用，createEvent 都没有。

最后对我有用的是：

targetElement.dispatchEvent(
    new MouseEvent('click', 
        bubbles: true,
        cancelable: true,
        view: window,
));

这是一个sn-p： 

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) 
    clickBtn.dispatchEvent(
        new MouseEvent('click', 
            bubbles: true,
            cancelable: true,
            view: window,
    ));
);

clickBtn.addEventListener('click', function(event) 
    console.warn(`I was accessed via the other button! A $event.type occurred!`);
);
<button class="clickme">Click me</button>

<button class="viame">Via me</button>

来自阅读： https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

【讨论】：

【参考方案4】：

如果您不想使用 jQuery 并且不是特别关心向后兼容性，只需使用：

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

请参阅文档 here 和 here。

编辑：根据您的设置，您可能需要添加bubbles: true：

let element = document.getElementById(id);
element.dispatchEvent(new Event('change',  'bubbles': true ));

【讨论】：

这应该是公认的答案，因为它不使用像 initEvent() 这样的过时方法 不错的解决方案，但请注意这不适用于 IE11。然后你应该使用CustomEvent 和相应的polyfill。 优于所选答案【参考方案5】：

您可以使用以下代码使用 Element 方法触发事件：

if (!Element.prototype.triggerEvent) 
    Element.prototype.triggerEvent = function (eventName) 
        var event;

        if (document.createEvent) 
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
         else 
            event = document.createEventObject();
            event.eventType = eventName;
        

        event.eventName = eventName;

        if (document.createEvent) 
            this.dispatchEvent(event);
         else 
            this.fireEvent("on" + event.eventType, event);
        
    ;



if (!Element.prototype.triggerEvent) 
    Element.prototype.triggerEvent = function (eventName) 
        var event;

        if (document.createEvent) 
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
         else 
            event = document.createEventObject();
            event.eventType = eventName;
        

        event.eventName = eventName;

        if (document.createEvent) 
            this.dispatchEvent(event);
         else 
            this.fireEvent("on" + event.eventType, event);
        
    ;


var input = document.getElementById("my_input");
var button = document.getElementById("my_button");

input.addEventListener('change', function (e) 
    alert('change event fired');
);
button.addEventListener('click', function (e) 
    input.value = "Bye World";
    input.triggerEvent("change");
);
<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

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

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

希望这会有所帮助！

【讨论】：

【参考方案8】：

如果你使用jQuery，你可以简单地做

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

并处理它

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

其中 "[arg0, arg1, ..., argN]" 表示这些参数是可选的。

【讨论】：

正确的语法是 $('#yourElement').trigger('customEventName', [ arg0, arg1, ..., argN ]);你忘记了第二个参数的[]【参考方案9】： 
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'

【讨论】：

【参考方案10】：

修改了@Dorian 的answer 以使用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

【讨论】：

在你的评论“对于除了 IE 之外的现代浏览器”我猜“除了 IE”是多余的 ;)【参考方案11】：

使用 jquery 事件调用。 在下面写下你想触发任何元素的 onChange 的地方。

$("#element_id").change();

element_id 是要触发 onChange 的元素的 ID。

避免使用

 element.fireEvent("onchange");

因为它的支持非常少。请参阅此文档以获取其support。

【讨论】：

【参考方案12】：

最有效的方法是直接调用在addEventListener注册的同一个函数。

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

最后一些元素，如&lt;input type="file"&gt; 支持.click() 方法。

【讨论】：

【参考方案13】：

只是建议一种不需要手动调用侦听器事件的替代方案：

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

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

我发现这不太“代码密集”并且更易于阅读。

【讨论】：

如果你想根据上下文为同一个事件（或者你的情况下的回调函数）做多个不同的事情怎么办？ :) 这是一个不错的选择，但这感觉更像是评论而不是答案，因为 OP 想知道如何以编程方式触发事件而不是使用回调:) 你说得对，这应该是评论而不是答案。为什么？因为，嗯，嗯，......它没有回答实际提出的问题。好决定。至于你自己的问题，我想说这对于 JavaScript 中的构造函数来说是一个很好的机会！ ;-) 但如果没有它们，我会说，在你的函数调用中发送一个参数，然后用它来确定函数应该做什么。【参考方案14】：

我使用 JavaScript 搜索了鼠标悬停时触发 click、mousedown 和 mouseup 事件。我找到了Juan Mendes 提供的答案。答案点击here。

点击here是现场演示，下面是代码：

function fireEvent(node, eventName) 
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) 
        doc = node.ownerDocument;
     else if (node.nodeType == 9) 
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
     else 
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    

    if (node.dispatchEvent) 
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) 
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
     else if (node.fireEvent) 
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    
;

【讨论】：

【参考方案15】：

一个工作示例：

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

对于旧版浏览器polyfill 和更复杂的示例，请参阅MDN docs。

查看EventTarget.dispatchEvent 和CustomEvent 的支持表。

【讨论】：

这个答案现在更实际了。补充一点：如果应该有一个已知类型的事件（如TransitionEvent、ClipboardEvent 等），则可以调用适当的构造函数。 @AngelPolitis：因为它是在前一个已经被接受之后写的，并且写问题的人（@KoolKabin）可能没有重新阅读答案 而且因为它是在 2010 年提出的 不适用于任何版本的 IE (caniuse.com/#feat=customevent)。请参阅我的answer 进行修复。 未来读者请注意，detail 是Event 的一个属性，因此请将您想要在另一端访问的任何数据分配给它并通过event.detail 访问。 +1【参考方案16】： 
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");

【讨论】：

已弃用。仅对 polyfill 有用。 developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…【参考方案17】：

我只是使用了以下（似乎更简单）：

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

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

【讨论】：

这里没有考虑是什么事件。模糊和聚焦可能会触发事件，但也可能不会。这是在邀请错误。 这也适用于element.click()。 这为我在 android 中的 Angular/Cordova 应用程序解决了一个奇怪的问题，即 textarea 拒绝清除自身。所以谢谢。【参考方案18】：

你想要的是这样的：

document.getElementByClassName("example").click();

使用 jQuery，它会是这样的：

$(".example").trigger("click");

【讨论】：

触发方法没有错，但是是jquery方法 1. document.getElementByClassName 不存在。 2. document.getElementsByClassName 存在但返回一个列表。 3. 这仅适用于少数本地事件。 4.最后一个例子触发了一个jQuery事件，其中不存在底层原生事件。

以上是关于如何在 JavaScript 中触发事件？的主要内容，如果未能解决你的问题，请参考以下文章

页面按钮如何触发声音事件？

如何在 JavaScript 中触发事件？

如何使用 JavaScript 在 Firefox 中触发鼠标滚轮事件？

如何在 Javascript 中移动子元素时触发一次鼠标事件？

如果一个事件触发了随机次数，我如何在 Javascript/Jquery 中捕获最后一个？

如何获取触发事件时执行的 JavaScript 文件列表？