如何在JavaScript中触发事件？

Question

我使用addEventListener为文本框附加了一个事件，它可以正常工作。但当我想要从另一个函数中编程触发该事件时，出现了问题。

我应该如何做呢？

- KoolKabin

---

请将已接受的答案更改为此，它更加更新。 - Michał Perłakowski

@RickyStam 看起来那篇 MDN 文章已经 移动到这里。 - styfle

Answer 1

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

- Alsciende

---

别忘了只有IE版本在前面加上'on'（我一开始没注意到）。 - hugomg

这里的变量eventName包含什么？ - NeDark

我认为问题是：eventName从哪里来？在这段代码中它是未定义的。它应该是"dataavailable"吗？如果是，请编辑答案。 - B T

Internet Explorer 9+ 可以处理 createEvent 和 dispatchEvent，因此不需要那些 if 语句。 - Blake

这个例子根本不起作用，看我的答案：https://dev59.com/snE95IYBdhLWcg3wCJRf#20548330 - Dorian

Answer 2

一个工作示例：

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

查看支持表格，了解EventTarget.dispatchEvent和CustomEvent的支持情况。

- Dorian

---

需要补充一点：如果应该有一个已知类型的事件（例如TransitionEvent，ClipboardEvent等），则可以调用相应的构造函数。 - Kiril

无法在任何版本的IE中工作（https://caniuse.com/#feat=customevent）。请参见我的[答案]（https://dev59.com/snE95IYBdhLWcg3wCJRf#49117631）以获取修复方法。 - Yarin

给未来读者的注意事项：detail是Event对象的一个属性，因此将您想要访问的任何数据分配给它，并通过event.detail进行访问。 +1 - olfek

Answer 3

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

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

查看此处文档和文档。

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

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

- e18r

---

这应该是被接受的答案，因为它没有使用像initEvent()这样已被弃用的方法。 - user2912903

好的解决方案，但请注意它在IE11上不起作用。您应该使用“CustomEvent”和相应的polyfill。 - Fabian von Ellerts

我们不再需要担心Internet Explorer了。微软已经宣布它已经死亡，我们也是这样认为的。任何仍在使用IE的人都应该得到你网页的过时版本。 - ilsloaoycd

Answer 4

如果你使用jQuery，你可以简单地执行以下操作：

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

并加以处理

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

其中“[arg0，arg1，...，argN]”表示这些参数是可选的。

- Hilder Vitor Lima Pereira

---

正确的语法是 $('#yourElement').trigger('customEventName', [ arg0, arg1, ..., argN ]); 你忘记了第二个参数处的中括号[]. - harry

Answer 5

注意：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>

- Mr. Polywhirl

---

这对于任何版本的IE都不起作用，因为存在window.CustomEvent，但它不能被调用为构造函数：http://caniuse.com/#search=CustomEvent ;) - SidOfc

Answer 6

我使用JavaScript搜索了关于在mouseover事件上触发click、mousedown和mouseup事件的方法。我找到了Juan Mendes提供的答案。要查看答案，请点击这里。

这里是演示示例，以下是代码：

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

- S.Mishra

Answer 7

对我来说，已经接受的答案不起作用了，任何createEvent都没有起作用。

最后对我有用的是:

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

Here’s a snippet:

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

- Ming

Answer 8

修改了@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);

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

参考链接:
https://caniuse.com/#feat=customevent

- Yarin

---

在您的评论中，“对于现代浏览器，除了IE”我猜“除了IE”是多余的 ;) - vir us

Answer 9

提供一个不需要手动调用监听器事件的替代方案：

无论您的事件监听器执行什么操作，都将其移入一个函数中，并从事件监听器调用该函数。

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

我认为这样更少的“代码密集”且更易于阅读。

- KWallace

---

如果您想根据上下文为同一事件（或在您的情况下，回调函数）执行多个不同的操作怎么办？ :) 这是一个很好的替代方案，但感觉更像是评论而不是答案，因为OP想知道如何以编程方式触发事件，而不是使用回调 :) - SidOfc

你说得很对，这本应该是一条评论而不是一个回答。为什么？因为嗯，它并没有回答实际上被问到的问题。做得好。至于你自己的问题，我会说这是JavaScript中构造函数的绝佳机会！;-)但如果没有构造函数，我会建议在函数调用时发送一个参数，并让它用于确定函数应该执行什么操作。 - KWallace

Answer 10

我刚刚使用了以下代码（似乎更简单）：

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

在这种情况下，只有在值真正发生改变的情况下才会触发事件，就像用户执行正常的焦点失去操作一样。

- Aleksander Lech

---

这并不考虑事件的类型。模糊和聚焦可能会触发事件，但也可能不会。这会引发错误。 - Mardok

这同样适用于 element.click()。 - AxeEffect

这解决了我 Angular/Cordova 应用在 Android 上的一个奇怪问题，即文本区域无法清除自身。所以谢谢。 - DarkNeuron