我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
当前回答
使用jquery事件调用。 写下面的行,你想触发任何元素的onChange。
$("#element_id").change();
element_id是要触发其onChange的元素的ID。
避免使用
element.fireEvent("onchange");
因为它的支撑力非常小。请参阅本文档以获得其支持。
其他回答
你可以使用我一起编译的这个函数。
if (!Element.prototype.trigger)
{
Element.prototype.trigger = function(event)
{
var ev;
try
{
if (this.dispatchEvent && CustomEvent)
{
ev = new CustomEvent(event, {detail : event + ' fired!'});
this.dispatchEvent(ev);
}
else
{
throw "CustomEvent Not supported";
}
}
catch(e)
{
if (document.createEvent)
{
ev = document.createEvent('HTMLEvents');
ev.initEvent(event, true, true);
this.dispatchEvent(event);
}
else
{
ev = document.createEventObject();
ev.eventType = event;
this.fireEvent('on'+event.eventType, event);
}
}
}
}
触发以下事件:
var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');
观察事件:
dest.addEventListener('focus', function(e){
console.log(e);
});
希望这能有所帮助!
如果你使用jQuery,你可以简单做到
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
然后用
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
[arg0, arg1,…], argN]表示这些参数是可选的。
修改@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
值得注意的是,我们可以创建任何类型的预定义事件,并在任何地方收听。
我们并不局限于经典的内置事件。
在这个基本示例中,自定义事件interfacebuiltsuccessuserdefinedevent每3秒在self.document上分派一次
self.document。addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() =>{//测试 self.document。dispatchEvent(新事件(interfacebuiltsuccessuserdefinedevent)) }, 3000) //测试
有趣的事实:元素可以侦听尚未创建的事件。
最有效的方法是直接调用已经注册到addEventListener的相同函数。
您还可以使用CustomEvent和co触发一个假事件。
最后,一些元素如<input type="file">支持.click()方法。