如何在JavaScript中触发事件？
我已经使用addEventListener将一个事件附加到文本框中。 它工作正常。 当我想从另一个函数以编程方式触发事件时，出现了我的问题。
我该怎么做？
您可以在IE 8或更低版本上使用fireEvent ，在大多数其他浏览器上使用w3c的dispatchEvent 。 要创build想要触发的事件，可以使用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); } 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.dispatchEvent和CustomEvent支持表。
如果你使用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");
