如何在JavaScript中触发事件?


Answers

一个工作示例:

// 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.dispatchEventCustomEvent支持表。

Question

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

我该怎么做?




你想要的是这样的:

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

使用jQuery,它会是这样的:

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



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



最有效的方法是直接调用与addEventListener注册的相同函数。

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

最后一些元素如<input type="file">支持.click()方法。




如果您支持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版本。

$(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>




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

无论你的事件监听器做什么,将它移入一个函数并从事件监听器调用该函数。

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

我觉得这不是“代码密集型”,更容易阅读。




Related