我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
当前回答
你可以使用下面的代码来使用Element方法触发事件:
if (!Element.prototype.triggerEvent) {
Element.prototype.triggerEvent = function (eventName) {
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(eventName, true, true);
} else {
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if (document.createEvent) {
this.dispatchEvent(event);
} else {
this.fireEvent("on" + event.eventType, event);
}
};
}
if (!Element.prototype.triggerEvent) { Element.prototype.triggerEvent = function (eventName) { var event; if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventName, true, true); } else { event = document.createEventObject(); event.eventType = eventName; } event.eventName = eventName; if (document.createEvent) { this.dispatchEvent(event); } else { this.fireEvent("on" + event.eventType, event); } }; } var input = document.getElementById("my_input"); var button = document.getElementById("my_button"); input.addEventListener('change', function (e) { alert('change event fired'); }); button.addEventListener('click', function (e) { input.value = "Bye World"; input.triggerEvent("change"); }); <input id="my_input" type="input" value="Hellow World"> <button id="my_button">Change Input</button>
其他回答
你想要的是这样的:
document.getElementByClassName("example").click();
使用jQuery,它是这样的:
$(".example").trigger("click");
如果你使用jQuery,你可以简单做到
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
然后用
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
[arg0, arg1,…], argN]表示这些参数是可选的。
你可以使用我一起编译的这个函数。
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);
});
希望这能有所帮助!
修改@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
HTML
<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>
JS
// click event listener of the link element --------------
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
// code to fire
}
// function invoked by the button element ----------------
function fireLink(event) {
document.getElementById('myLink').click(); // script calls the "click" event of the link element
}