我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。
我该怎么做呢?
当前回答
var btn = document.getElementById('btn-test');
var event = new Event(null);
event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);
这将立即触发一个事件'beforeinstallprompt'
其他回答
var btn = document.getElementById('btn-test');
var event = new Event(null);
event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);
这将立即触发一个事件'beforeinstallprompt'
注意:initEvent方法现在已弃用。其他回答功能最新的和建议的做法。
你可以在ie8或更低版本上使用fireEvent,在大多数其他浏览器上使用W3C的dispatchEvent。要创建想要触发的事件,可以根据浏览器使用createEvent或createEventObject。
下面是一段不言自明的代码(来自原型),它可以触发元素上可用的事件数据:
var event; // The custom event that will be created
if(document.createEvent){
event = document.createEvent("HTMLEvents");
event.initEvent("dataavailable", true, true);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}
注意: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 " > < /脚本>
接受的答案不适合我,createEvent的都不行。
最后对我有用的是:
targetElement.dispatchEvent(
new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}));
Here’s a snippet: const clickBtn = document.querySelector('.clickme'); const viaBtn = document.querySelector('.viame'); viaBtn.addEventListener('click', function(event) { clickBtn.dispatchEvent( new MouseEvent('click', { bubbles: true, cancelable: true, view: window, })); }); clickBtn.addEventListener('click', function(event) { console.warn(`I was accessed via the other button! A ${event.type} occurred!`); }); <button class="clickme">Click me</button> <button class="viame">Via me</button>
从阅读: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
你可以使用下面的代码来使用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>