我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时，问题就出现了。
我该怎么做呢?
当前回答
你想要的是这样的:
document.getElementByClassName("example").click();
使用jQuery，它是这样的:
$(".example").trigger("click");
其他回答
修改@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);
小提琴:https://jsfiddle.net/z6zom9d0/1/
参见: https://caniuse.com/#feat=customevent
如果你使用jQuery，你可以简单做到
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
然后用
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
[arg0, arg1，…]， argN]表示这些参数是可选的。
注意:initCustomEvent方法现在已弃用。其他回答功能最新的和建议的做法。
如果您支持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版本。
$(函数(){ //添加事件监听器 美元(文档)。on('customChangeEvent'，函数(e, opts) { $('体'). html (opts.detail); })； //触发事件 美元(文档)。触发(customChangeEvent, { detail: '显示在触发器…' })； })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本>
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");
我只是使用了以下方法(似乎更简单):
element.blur();
element.focus();
在这种情况下，只有当值真的发生改变时才会触发事件，就像由用户执行的正常焦点轨迹丢失会触发它一样。
