如何在JavaScript中触发事件?

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

我该怎么做?

您可以在IE 8或更低版本上使用fireEvent ,在大多数其他浏览器上使用w3c的dispatchEvent 。 要创build想要触发的事件,可以使用createEventcreateEventObject具体取决于浏览器。

这是一个自解释的代码(从原型),触发一个element上的事件dataavailable

  var event; // The custom event that will be created if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent("dataavailable", true, true); } else { event = document.createEventObject(); event.eventType = "dataavailable"; } event.eventName = "dataavailable"; if (document.createEvent) { element.dispatchEvent(event); } else { element.fireEvent("on" + event.eventType, event); } 

一个工作的例子:

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

对于较旧的浏览器填充和更复杂的示例,请参阅MDN文档 。

请参阅EventTarget.dispatchEventCustomEvent支持表。

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

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

并处理它

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

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

如果您支持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...' }); 

我使用JavaScriptsearch点击,鼠标hover和mouseup事件。 我find了胡安·门德斯提供的答案。 答案请点击这里 。

点击这里是现场演示,下面是代码:

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

只是build议一个不涉及需要手动调用侦听器事件的替代方法:

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

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

我觉得这不是“密码强化”,更容易阅读。

我只是用下面的(似乎更简单):

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

在这种情况下,只有在真正改变了数值的情况下,才会触发事件,正如您通过用户执行的正常焦点轨迹触发它一样。

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

你想要的是这样的:

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

使用jQuery,这将是这样的:

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