How can I trigger an onchange event manually?(如何手动触发 onchange 事件?)
问题描述
我正在通过日历小部件设置日期时间文本字段值.显然,日历小部件会做这样的事情:
I'm setting a date-time textfield value via a calendar widget. Obviously, the calendar widget does something like this :
document.getElementById('datetimetext').value = date_value;
我想要的是:在更改日期时间文本字段中的值时,我需要重置页面中的其他一些字段.我在 datetimetext 字段中添加了一个 onchange 事件侦听器,它没有被触发,因为我猜 onchange
只有在元素获得焦点时才会触发.它的值在失去焦点时改变.
What I want is :
On changing value in the date-time textfield I need to reset some other fields in the page. I've added a onchange event listener to the datetimetext field which is not getting triggered, because I guess onchange
gets triggered only when the element gets focus & its value is changed on losing focus.
因此,我正在寻找一种方法来手动触发此 onchange
事件(我猜应该负责检查文本字段中的值差异).
Hence I'm looking for a way to manually trigger this onchange
event (which I guess should take care of checking the value difference in the text field).
有什么想法吗?
推荐答案
有几种方法可以做到这一点.如果 onchange
侦听器是通过 element.onchange
属性设置的函数,并且您不关心事件对象或冒泡/传播,最简单的方法就是调用那个函数:
There's a couple of ways you can do this. If the onchange
listener is a function set via the element.onchange
property and you're not bothered about the event object or bubbling/propagation, the easiest method is to just call that function:
element.onchange();
如果你需要它来完整模拟真实事件,或者如果你通过html属性或addEventListener
/attachEvent
设置事件,你需要做一点特征检测以正确触发事件:
If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener
/attachEvent
, you need to do a bit of feature detection to correctly fire the event:
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
else
element.fireEvent("onchange");
这篇关于如何手动触发 onchange 事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何手动触发 onchange 事件?
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01