propertychange的绑定事件处理

最新推荐文章于 2025-05-16 13:43:21 发布
最新推荐文章于 2025-05-16 13:43:21 发布
阅读量3.6k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jallin2001/article/details/6445843
探讨了在使用jQuery时遇到的问题：当DOM元素通过detach()方法移除后，原先绑定在其上的事件无法正常触发，即使使用live()或delegate()也无法解决。本文尝试寻找合理的解决方案。

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

 

原先再没有DOM元素的detach()或者empty()等删除后，元素上面绑定的事件，依然有问题，比如：

 

$("#table").find("tr:gt(0)").find("td:eq(0)").bind("propertychange", function(){

brightDeleteButton();

});

 

在#table表格中的元素全部被detach()后，这里绑定的事件，就算用live()，delegate()也无效，目前还没想到

好的办法。

10、探索Visual Basic插件开发中的事件处理机制
cream的博客
06-16 12
本文详细介绍了Visual Basic IDE中的事件处理机制，包括CommandBarEvents、FileControlEvents、ReferencesEvents等多种事件对象的声明、初始化及应用场景。通过实验案例和典型应用场景分析，帮助开发者掌握如何利用这些事件对象提升插件功能性和用户体验。
jQuery使用bind动态绑定事件无效的处理方法
01-19
最近在进行页面开发，在做页面特效的时候，需要给一个动态加载的按钮赋予一个事件 于是不假思索的 用$(obj).bind();  来绑定事件 。 但是这样存在一个问题： bind确实能绑定事件，但是那是相对于固定的html标签来说 当页面内容属于动态加载的时候，bind事件就存在一个bug,  只能bind一次，当你第二次触发事件的时候就没用了 例如： 我给<a>标签赋予一个click ， <a>标签包括内容都是从后台数据读取然后动态加载的。当我使用bind来绑定click事件，这时， 第一次点击click能成功触发 但是第二次点击，click事件无效了. 后面研究发现，jQuery还有个绑定事
jquery下onpropertychange事件的绑定方法
10-28
用了onchange事件，但是在输入的时候，用Javascript计算出并填值的那一列并不会响应onchange 事件。
Razor Pages深度探索：表单处理与数据绑定
weixin_35754962的博客
05-16 358
本文深入探讨了ASP.NET Core中Razor Pages的数据绑定和表单处理机制。通过具体的代码示例和模式分析，展示了如何设计一个编辑产品的页面，以及如何通过模型绑定简化数据处理流程。文章强调了数据验证的重要性，并提供了组织绑定模型的建议，如使用[BindProperty]标记单个属性、定义嵌套的绑定模型类，以及如何避免过度发布攻击。最后，简要介绍了Razor视图模板的创建和使用，以及如何利用Razor语法将C#和HTML混合来生成动态的用户界面。
jquery bind onpropertychange
ge_zhiqiang 专栏
12-09 2414
jquery 代码： $(document).ready(function (){ $("#zqmj").bind("propertychange",function (){ var zqmjVal=$("#zqmj").val(); var deptment='${appUser.regionid}'; if(zqmjVal!=null && $.trim(zqmjVal).l
propertychange 不起作用
weixin_33709609的博客
08-22 1286
兼容性问题。将$("#systemLogSettings td[name='nMaxFileSize'] input").on("input propertychange", function(){...});写成$("#systemLogSettings ").on("input propertychange","td[name='nMaxFileSize'] input", function(...
ActionScript遍历绑定(BindProperty,BindSetter,ChangeWatcher)
Inner peace
02-01 224
[size=medium][b][color=darkred]注意: 为防止内存益处，记得调用watcherInstance.unwatch();[/color][/b][/size] [size=medium]在MXML标签中很容易将一个组件的某个属性绑定到某个变量上， 如，其中person定义为bindable。 但是如果不用mxml标签，而只在actionscipt代码里面如何实现...
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
12-07
在jQuery中，`bind`函数是用来绑定事件处理函数到元素上的。然而，当你尝试像原生JavaScript那样在事件名称前加上`on`时，如`onpropertychange`，jQuery可能无法正确识别。实际上，jQuery的`bind`方法并不需要`on`...
jQuery监控文本框事件并作相应处理的方法
10-24
本文将深入探讨如何使用jQuery来监控文本框事件并执行相应的处理。在Web开发中，实时响应用户输入是常见的需求，例如，当用户在搜索框中输入内容时，可以即时显示搜索建议或预览结果。 首先，jQuery提供了`.on()`...
propertychange 的使用方法
热门推荐
June的专栏
12-13 3万+
propertychange 的正确使用        在做一个查询搜索，需要根据input值改变而触发事件，需要用到propertychange 和oninput，但是propertychange引用好多博客都是错误的；正确方法如下： $('#addressSearch').bind('input propertychange', function() { var adType=do
Jquery:onChange()与propertychange()
wslone100的博客
11-14 1万+
onChange()：相应的值改变且在失去焦点后才会触发： $("#").change(function(){ 。。。 }); propertychange()：相应的值改变就会触发，但是只对ie有效： $("#").bind("propertychange",function(){ 。。。 }) --------------------------------------
OA前端开发（1） 系统函数
奋斗的胡萝卜
09-15 2691
1.自己写的页面如何使用bindPropertyChange 代码如下： 首先引入对于的js文件 &lt;script type="text/javascript" src="/js/workflow/VCEventHandle_wev8.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var chromeOnP..
泛微OA实现根据下拉选择框来对其他单元格进行赋值
CXYCMY的博客
04-28 1516
泛微OA根据下拉选择框的选值对单元格进行赋值操作
通过js的bind绑定监听配合debounce使用
夏微凉秋微暖的博客
03-06 633
在一个input中经常需要实时监听用户输入的内容，以此可以判断或者请求ajax方法等等，但是却又不能用户一输入就请求，所以需要配合debounce这个延时器来：首先需要导入jquery，以及debounce的underscore-min.js（http://www.css88.com/doc/underscore/）$(function(){ $("#goodsCodeDiv .a...
泛微Js绑定流程各种事件
余大冠子的博客
11-04 2597
【代码】泛微Js绑定流程各种事件。
泛微oa流程表单之明细表下拉框事件
码农阿益的博客
04-21 5019
// 获取明细表中下拉框的值 <script> jQuery(document).ready(function() { var indexNum = jQuery("#indexnum0");//获取第一个明细表 var czlb= '#field22340';//明细表中的字段 indexNum.bindPropertyChange(function() {//明细表...
javascript实现两个select选择框内容动态绑定
Walker_m的博客
04-23 5483
1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市：对应的html代码，主体就是两个选择框[html] view plain co...
即时反应的input和propertychange方法
a15980755772的博客
12-06 686
在web开发中，我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了，同时，在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。 1.oninput&onchange： oninp...
ie用jq绑定change事件
最新发布
07-05
<think>我们正在处理用户的问题：用户想在IE浏览器中使用jQuery绑定change事件，并询问兼容性问题。 根据引用[2]的内容，我们知道在IE浏览器中（特别是IE9），jQuery的change事件在input元素上可能不会立即触发（需要失去焦点才触发，但用户期望的是输入后立即触发？实际上change事件的标准行为就是在失去焦点时触发）。但是，用户可能期望的是实时触发，或者至少在不同浏览器中行为一致。 然而，引用[2]提到了一种解决方案：使用focus和blur事件来模拟检测value的变化。因为change事件在IE中可能不会在每次输入时触发（而是在失去焦点且值改变时触发），所以这种方法可以确保在值改变时（失去焦点时）执行相应的操作。 但是，用户的问题是关于“绑定change事件”的兼容性，我们需要明确： 1. jQuery的change事件在IE中的行为是符合标准的：当元素的值改变并且失去焦点时触发。这与现代浏览器的行为一致。 2. 但是，如果用户期望在每次输入（比如按键）时就触发，那么change事件本身就不是合适的选择，应该使用input事件（但input事件在IE9中不支持）。 因此，我们需要考虑两种情况： a) 用户确实需要change事件（即失去焦点且值改变时触发）：在IE中，jQuery的change事件是兼容的，但注意IE9及以下版本中，对于某些元素（如select、radio、checkbox）的change事件是支持的，但对于input[type=text]等，也是失去焦点时触发，这是标准行为。 b) 如果用户希望实时触发（即每次输入都触发），那么应该使用input事件，但IE9不支持input事件，所以需要针对IE9使用propertychange事件。 根据以上分析，我们可以给出解决方案： 1. 如果用户需要的是标准的change事件（失去焦点时触发），那么直接使用jQuery的change方法即可，它在IE6+都支持（因为jQuery已经处理了兼容性）。 2. 如果用户需要实时监听输入值的变化（即每次输入都触发），那么我们可以使用以下方法： - 对于支持input事件的浏览器（IE9以上及其他现代浏览器），使用input事件。 - 对于IE9及以下版本，使用propertychange事件（注意：IE9支持propertychange事件）。 因此，我们可以这样绑定： ```javascript $('input[type="text"]').on('input propertychange', function() { // 处理值变化 }); ``` 但是，注意：propertychange事件在IE中可能会在除了value以外的属性改变时也触发，所以我们需要在事件处理函数中判断一下是否是value改变，或者我们可以简单处理，因为一般情况下我们只关心value。 另外，jQuery的on方法可以同时绑定多个事件，如上所示。 但是，用户的问题中特别提到IE浏览器，所以我们还需要注意： - 在IE9中，使用propertychange事件可以实时监听value的变化。 - 在IE9以上（如IE10+）以及现代浏览器，input事件可以正常工作。 因此，使用上述方法可以做到兼容。 然而，如果用户只需要在值改变时触发，而不需要实时（比如只需要在失去焦点时触发），那么直接使用change事件即可。 所以，我们需要根据用户的具体需求来选择。 由于用户的问题没有明确是实时触发还是失去焦点触发，我们可以提供两种方案，并解释它们的区别。 另外，引用[2]中提供的解决方案是在失去焦点时判断值是否改变，这实际上和change事件的标准行为一致，但它是通过focus和blur事件来模拟的。这种方法也可以，但不如直接使用change事件简洁（除非有特殊需求，比如需要在值改变时立即做一些事情，但又不想等到失去焦点，那么就不适合用change事件）。 总结回答： 1. 如果希望元素的值在改变且失去焦点时触发事件，使用jQuery的change事件即可，它在IE6+中都是兼容的。 2. 如果希望实时触发（即每次输入都触发），则使用input事件（针对现代浏览器）和propertychange事件（针对IE9及以下）的组合。 我们给出实时触发的代码示例： ```javascript // 使用jQuery的on方法绑定input和propertychange事件 $('input[type="text"]').on('input propertychange', function() { // 这里可以写处理逻辑 console.log('值改变了：', $(this).val()); }); ``` 注意：propertychange事件在IE9以下（如IE8）中也可能被触发，但jQuery1.9+已经放弃了对IE6/7/8的支持，所以如果用户还在使用旧版jQuery且需要支持IE8，那么需要确保jQuery版本支持。但通常我们建议使用较新的jQuery版本（1.12+或2.x+，3.x+），它们对IE8及以下不再支持。 如果用户需要支持IE8，那么使用上述代码在IE8中也可以工作（因为IE8支持propertychange），但要注意jQuery版本是否支持IE8。 因此，我们还需要询问用户使用的jQuery版本和需要支持的IE版本。 但是，由于用户没有提供，我们先给出通用的方法。 另外，我们也可以使用一个函数来统一处理，比如： ```javascript var eventName = ('oninput' in document.createElement('input')) ? 'input' : 'propertychange'; $('input[type="text"]').on(eventName, function() { // 处理 }); ``` 但这样在IE9中，由于支持propertychange也支持input（IE9部分支持input，但实际测试IE9不支持input事件，所以我们需要用propertychange），所以上述判断可能不准确。更好的方法是同时绑定两个事件，因为现代浏览器会忽略它们不支持的事件名（比如propertychange在现代浏览器中不会触发，所以绑定也没关系），而IE9中同时绑定两个事件，但propertychange会触发，input不会触发（在IE9中）。 所以，同时绑定两个事件是安全的。 最后，我们生成相关问题： 1. 如何在不同浏览器中实现输入框的实时监听？ 2. jQuery的change事件和input事件有什么区别？ 3. 如何兼容IE8及以下版本的input事件？ 注意：用户的问题是关于IE浏览器中jQuery绑定change事件的兼容性，我们已经回答，但需要明确用户的需求是实时触发还是失去焦点触发。 因此，我们在回答中先解释两种需求，然后分别给出方案。 回答结构： 1. 解释change事件在IE中的行为（标准行为，失去焦点时触发） 2. 如果用户需要实时触发，提供input和propertychange的组合方案 3. 提供代码示例 4. 提示jQuery版本对IE的支持情况 开始回答：</think>### IE浏览器中jQuery绑定change事件的兼容性解决方案 在IE浏览器（特别是IE9及以下版本）中使用jQuery绑定`change`事件时，确实存在兼容性问题。主要表现是：**当`<input>`元素的值改变时，IE不会立即触发change事件，需要失去焦点后才触发**。这与现代浏览器（如Chrome/Firefox）的行为不一致[^2]。 #### 兼容性解决方案 以下是两种可靠的方法，均兼容IE6+： ##### 方法1：使用`focus`+`blur`组合监测值变化 ```javascript $("input").focus(function() { // 存储初始值 $(this).data("oldValue", $(this).val()); }).blur(function() { // 比较值是否变化 if ($(this).data("oldValue") !== $(this).val()) { // 执行自定义操作 handleChange(); } }); ``` **原理**： 1. 聚焦时保存原始值到`data-oldValue` 2. 失焦时比较新旧值 3. 值变化时触发自定义函数[^2] ##### 方法2：使用`propertychange`事件（IE专属） ```javascript $("input").on("input propertychange", function() { // 实时响应值变化（IE9+和其他浏览器） handleRealTimeChange(); }); ``` **注意**： - `propertychange`是IE专属事件，可实时监测value变化 - 现代浏览器使用`input`事件 - 使用jQuery的`.on()`同时绑定确保兼容性 #### 不同IE版本的兼容建议 | IE版本 | 推荐方案 | 注意事项 | |------------|-----------------------------|----------------------------| | IE6-8 | 方法1（focus+blur） | 不支持`input`/`propertychange` | | IE9 | 方法2（propertychange） | 需配合`input`事件绑定 | | IE10+ | 直接使用`change`事件 | 行为已与现代浏览器一致 | #### 最佳实践建议 1. **统一使用`.on()`绑定事件** ```javascript // 推荐标准写法 $(document).on('change', 'input', handleChange); ``` 2. **对旧版IE做特性检测** ```javascript if ("oninput" in document.createElement("input")) { // 现代浏览器使用input事件 $("input").on("input", handleRealTime); } else { // IE8及以下使用focus/blur $("input").focus(/*...*/).blur(/*...*/); } ``` 3. **表单元素特殊处理** 对于`<select>`和`<checkbox>`元素，IE的`change`事件兼容性良好，可直接使用标准绑定方式。 > **关键提示**：jQuery本身对事件兼容性做了封装，但IE对表单值变化的检测机制与其他浏览器不同，这是底层浏览器行为差异导致的[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值