让人纠结的Click事件和Change事件

本文分享了一个关于在机房收费系统开发过程中遇到的小问题:使用ComboBox控件时,Click与Change事件的区别。作者最初使用Change事件触发查询,却发现无法正确获取数据。经过同事的帮助,发现应使用Click事件。文章进一步解释了两者之间的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    在做机房收费系统的时候,有个小问题让我纠结了几乎一天。虽然我知道它简单的要死,但就是不知道该怎么解决。

    就是在添加删除用户那个窗体中,有一个小功能是根据用户级别来查询用户名、姓名、开户人等信息。用户级别的选择是通过选择ComboBox控件的下拉选项来实现的。在做的时候想也没想就直接点击窗体上的控件切换到了代码窗口。

    就在我将所有代码都敲好后开始运行的时候,发现MSHFlexGrid控件根本就不能显示数据,是空的。当时很纳闷,以为是SQL语句有问题,然后就开始各种尝试,没解决。

    当时很纠结,因为知道这个问题一定很容易解决,但是我却不知道错在哪。

    后来我不耐烦了,刚好张文康到我这来,正好,抓到一个,就问他。他看了一下我的代码,把Change改成了Click,然后程序就可以显示查询结果了。

    那好吧,我承认自己基础不扎实,这种问题本不应该出现的。现在问题是解决了,但是为了吸取教训,一定要把这个总结一下,警告自己。

    以ComboBox控件为例,ClickChange这两个事件到底有什么不同呢?

         Click事件是选择列表项,而Change事件则是编辑内容,这两个事件的结果都是使ComboBox控件中的现实内容发生变化,但是一个是通过鼠标点击,即Click;另一个是通过在输入框中编辑内容,即Change。

    其实早在验收学生信息系统的时候,师父就和我提到过这个问题,但是当时我没有太在意。结果,欠下的总是要还的,在收费系统中就让我好好纠结了一次。不过这只是一个小小的开始而已,知道自己的基本功不扎实,所以像这样的问题估计还有好多在等着我,而且,做事情也总是不细心,想当然地以为直接点过去了就完事,也不看看是什么事件,认为默认的就是正确的,其实不然。

     也许过了这一关以后,我就该踏实多了。

作者信息

在HTML中,下拉框(select)的change事件click事件是浏览器自动关联的,它们的顺序通常是这样的:用户点击下拉框(触发click事件)后,选择一个选项(触发change事件)。如果你想改变这个顺序,比如让click事件先于change事件触发,或者完全独立控制这两个事件,常规做法是利用JavaScript而不是修改浏览器原生行为。 下面是一个简单的例子,我们可以通过JavaScript代理这两个事件: ```html <select id="mySelect"> <!-- 你的选项 --> </select> <script> const select = document.getElementById('mySelect'); // 绑定click事件 select.addEventListener('click', function(e) { console.log('Click event triggered'); }); // 阻止默认的change事件,然后添加我们的自定义事件处理程序 select.addEventListener('change', function(e) { e.preventDefault(); // 阻止默认行为(这里只是防止实际的选项切换) setTimeout(function() { console.log('Change event triggered after click'); }, 0); // 延迟一段时间模拟click后的change事件 }, { passive: false }); // 添加passive属性是为了兼容某些旧版本浏览器 // 或者,如果你想在click事件后再异步处理change,可以这样做 select.addEventListener('click', function(e) { // ...你的click处理... setTimeout(() => { select.dispatchEvent(new Event('change')); // 手动触发change事件 }, 0); }); </script> ``` 请注意,上述示例只是为了演示如何改变事件顺序,实际上在大多数情况下,不需要特意改变这种自然的交互流程。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值