js中的onchange和onpropertychange

northc

浏览: 195760 次
性别:
来自: QD

最近访客更多访客>>

goinnet

itsection

a360164108

yangshenming

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web
Javascript

当一个HTML元素的属性用js改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。
也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。

还有一点要注意到，当onblur和 onchange事件一起用时，onblur会出问题。。。。详见如下

测试页面：

<html>  
<head> <title>通过js改变文本框中的值后触发的事件：onpropertychange事件 </title> </head>  
<body>  

<div id="test1">  
<b> 测试onpropertychange事件和onchange事件一起用时： </b> <br>  
<font color="red">测试结果：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而 onchange只有在用键盘改变其值，然后在失去焦点后才触  

发，用js改变其值不触发 </font>  
<br>  
<input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了onchange事件！')" size="30" >  
<input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改变文本框后的值'">  
<br>  
<br>  
<br>  

<div id="test2">  
<b> 测试只有onblur和onchange事件时： </b> <br>  
<font color="red">测试结果：onchange先触发，onblur后触发 </font>  
<br>  
<input name="haha2" type="text" onblur="alert('触发了onblur事件！')" onchange="alert('触发了onchange事件！')" size="30" >  
<input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改变文本框后的值'">  
<br>  
<div>  
<br>  
<br>  
<br>  


<div id="test3">  
<b>测试当onblur和onpropertychange事件一起用时： </b> <br>  
<font color="red">测试结果：onblur好象出了问题，只要用键盘在文本框中随便输入一个值，便会触发它。可能是 onpropertychange把它惹毛了。。。^-^ </font>  
<br>  
<input name="haha3" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30" >  
<input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改变文本框后的值'">  
<br>  
<div>  
<br>  
<br>  
<br>  


<div id="test4">  
<b>测试有onblur、onpropertychange事件和onchange事件 一起用时： </b> <br>  
<font color="red">测试结果：onblur在和onpropertychange一起用时的问题仍然存在 </font>  
<br>  
<input name="haha4" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了  

onchange事件！')" size="30" >  
<input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'">  
<br>  
<div>  

</body>  
</html>

PS:以上测试在IE6中正确，在火狐中无效(解决办法如下)

IE下onpropertychange与firefox下oninput用法

onpropertychange能够捕获每次输入值的变化。例如：<INPUT id="test" name="test" />对象的value值被改变时，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。

onpropertychange 不被firefox所支持，如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

例子：

<html>
<body>
<div>oninput测 试</div>
<div id="testdiv"><input id='tx1' name="tx1" value="" /></div>
</body>
</html>
<script language="JavaScript">
    <!--
function getOs(){//判断浏览器类型
    var OsObject = "";
   if(navigator.userAgent.indexOf("MSIE")>0) {
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
   }
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
        return "Safari";
   } 
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
        return "Camino";
   }
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
        return "Gecko";
   }
}
if(navigator.userAgent.indexOf("MSIE")>0){
document.getElementById('tx1').attachEvent("onpropertychange",txChange);
}else if(navigator.userAgent.indexOf("Firefox")>0){
    document.getElementById('tx1').addEventListener("input",txChange2,false);
}
function txChange(){
    alert("testie");
}
function txChange2(){
    alert("testfirefox");
}
</script>

分享到：

Javascript中的~和~~ | parentNode、parentElement，childNodes、 ...

2011-12-28 11:26
浏览 1860
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

YOLOv12：以注意力为中心的实时目标检测器.pdf: YOLOv12：以注意力为中心的实时目标检测器

GO语言基础语法指令教程: GO语言基础语法指令教程

MATLAB代码实现：分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析：分布式电源接入对配电网运行影响评估,MATLAB代码：分布式电源接入对配电网影响分析关键词：分布式电源配电: MATLAB代码实现：分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析：分布式电源接入对配电网运行影响评估,MATLAB代码：分布式电源接入对配电网影响分析关键词：分布式电源配电网评估参考文档：《自写文档，联系我看》参考选址定容模型部分；仿真平台：MATLAB 主要内容：代码主要做的是分布式电源接入场景下对配电网运行影响的分析，其中，可以自己设置分布式电源接入配电网的位置，接入配电网的有功功率以及无功功率的大小，通过牛顿拉夫逊法求解分布式电源接入后的电网潮流，从而评价分布式电源接入前后的电压、线路潮流等参数是否发生变化，评估配电网的运行方式。代码非常精品，是研究含分布式电源接入的电网潮流计算的必备程序 ,分布式电源; 配电网; 接入影响分析; 潮流计算; 牛顿拉夫逊法; 电压评估; 必备程序。,基于MATLAB的分布式电源对配电网影响评估系统

三相光伏并网逆变器：Mppt最大功率跟踪与800V中间母线电压的电力转换技术,三相光伏并网逆变器：实现最大功率跟踪与800V中间母线电压的优化处理,三相光伏并网逆变器输入光伏Mppt 最大功率跟踪: 三相光伏并网逆变器：Mppt最大功率跟踪与800V中间母线电压的电力转换技术,三相光伏并网逆变器：实现最大功率跟踪与800V中间母线电压的优化处理,三相光伏并网逆变器输入光伏Mppt 最大功率跟踪中间母线电压800V 后级三相光伏并网逆变器 ,三相光伏并网逆变器; 输入光伏Mppt; 最大功率跟踪; 中间母线电压800V; 后级逆变器,三相光伏并网逆变器：MPPT最大功率跟踪800V母线电压

基于SSM的车位销售平台设计与实现.zip(毕设&课设&实训&大作业&竞赛&项目): 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用

西门子博途三部十层电梯程序案例解析：基于Wincc RT Professional V14及更高版本的应用探索,西门子博途三部十层电梯程序案例解析：基于Wincc RT Professional画面与: 西门子博途三部十层电梯程序案例解析：基于Wincc RT Professional V14及更高版本的应用探索,西门子博途三部十层电梯程序案例解析：基于Wincc RT Professional画面与V14及以上版本技术参考,西门子1200博途三部十层电梯程序案例，加Wincc RT Professional画面三部十层电梯程序，版本V14及以上。程序仅限于参考资料使用。 ,西门子;1200博途;三部十层电梯程序案例;Wincc RT Professional;V14以上程序版本。,西门子V14+博途三部十层电梯程序案例：Wincc RT Pro专业画面技术解析

基于舆情数据的知识图谱推荐可视化系统论文，全原创，免费分享: 基于舆情数据的知识图谱推荐可视化系统论文，全原创，免费分享

基于Vivado源码的AM包络检调制解调与FIR滤波器设计在FPGA上的实现,基于Zynq-7000和Artix-7系列的AM包络检调制解调源码及Vivado环境下的实现,AM包络检调制解调,Viva: 基于Vivado源码的AM包络检调制解调与FIR滤波器设计在FPGA上的实现,基于Zynq-7000和Artix-7系列的AM包络检调制解调源码及Vivado环境下的实现,AM包络检调制解调,Vivado源码 FPGA的AM调制解调源码，其中FIR滤波器根据MATLAB设计。【AM_jietiao】文件是基于zynq-7000系列，但没有涉及AD与DA，只是单纯的仿真。【AM包络检调制解调_Vivado源码】文件基于Artix-7系列，从AD读入信号后，进行AM调制，并解调DA输出。 ,AM包络检调制解调;Vivado源码;FPGA;AM调制解调源码;FIR滤波器;MATLAB设计;Zynq-7000系列;Artix-7系列;AD读入信号;DA输出,AM包络调制解调源码：Zynq-7000与Artix-7 FPGA的不同实现

rdtyfv、ijij: yugy

2025山东大学：DeepSeek应用与部署（部署方案大全+API调用+业务应用）-80页.pptx: 2025山东大学：DeepSeek应用与部署（部署方案大全+API调用+业务应用）-80页.pptx

chromedriver-mac-x64-135.0.7023.0(Dev).zip: chromedriver-mac-x64-135.0.7023.0(Dev).zip

基于单片机protues仿真的433MHz无线模块编解码收发通信测试（仿真图、源代码）: 基于单片机protues仿真的433MHz无线模块编解码收发通信测试（仿真图、源代码）该设计为单片机protues仿真的433MHz无线模块收发通信测试； 1、433M超再生收发模块； 2、在仿真图中是把发射MCU的P2_7腿直接输入到接收MCU的INT0实现编码解码的； 3、通过433MHz无线模块实现无线通信的编解码功能； 4、按键控制指令； 5、液晶屏显示收发状态和信息；

车机安卓版好用的应用管理app: 资源说说明; 自带文件管理 adb操作以及应用管理等等的功能。操作性对比其他应用较好。参阅博文： https://blog.csdn.net/mg668/article/details/145689511?spm=1001.2014.3001.5352

软件工程课程设计前端.zip: 项目工程资源经过严格测试运行并且功能上ok，可实现复现复刻，拿到资料包后可实现复现出一样的项目，本人系统开发经验充足（全栈全领域），有任何使用问题欢迎随时与我联系，我会抽时间努力为您解惑，提供帮助【资源内容】：包含源码+工程文件+说明等。答辩评审平均分达到96分，放心下载使用！可实现复现；设计报告也可借鉴此项目；该资源内项目代码都经过测试运行，功能ok 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能【提供帮助】：有任何使用上的问题欢迎随时与我联系，抽时间努力解答解惑，提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步下载后请首先打开说明文件（如有）;整理时不同项目所包含资源内容不同;项目工程可实现复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用

智慧图书管理系统(源码+数据库+论文)java开发springboot框架javaweb，可做计算机毕业设计或课程设计: 智慧图书管理系统(源码+数据库+论文)java开发springboot框架javaweb，可做计算机毕业设计或课程设计【功能需求】本系统分为读者、管理员2个角色读者可以进行注册登录、浏览图书以及留言、图书借阅、图书归还、图书续借、个人中心、论坛交流、等功能管理员可以进行读者管理、图书管理、论坛论坛回复管理、图书借阅管理（下架、库存管理、修改、删除）、轮播图管理【环境需要】 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.数据库：MySql 5.7/8.0等版本均可；【购买须知】本源码项目经过严格的调试，项目已确保无误，可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件，讲解视频，部署视频教程，一应俱全，可以自己按照教程导入运行。附有论文参考，使学习者能够快速掌握系统设计和实现的核心技术。

三相APFC电路与单相Boost PFC电路仿真模型：电压外环电流内环双闭环控制研究,三相电路仿真模型：探索APFC电路、单相PFC电路及BoostPFC电路的动态特性与双闭环控制策略,APFC电路: 三相APFC电路与单相Boost PFC电路仿真模型：电压外环电流内环双闭环控制研究,三相电路仿真模型：探索APFC电路、单相PFC电路及BoostPFC电路的动态特性与双闭环控制策略,APFC电路，单相PFC电路，单相BoostPFC电路仿真模型。网侧220V 50Hz,输出电压设置为50Hz。电压外环电流内环双闭环控制仿真模型 ,APFC电路; 单相PFC电路; 单相BoostPFC电路仿真模型; 网侧电压; 220V 50Hz; 输出电压50Hz; 电压外环电流内环双闭环控制仿真模型。,基于APFC电路的单相Boost PFC仿真模型：网侧电压220V/50Hz下电压电流双闭环控制的研究与应用

MATLAB环境下ADMM算法在分布式调度中的应用：比较并行与串行算法(Jocobi与Gaussian Seidel)的优化效果与实现细节-基于YALMIP和GUROBI的仿真平台复刻参考文档的研究: MATLAB环境下ADMM算法在分布式调度中的应用：比较并行与串行算法(Jocobi与Gaussian Seidel)的优化效果与实现细节——基于YALMIP和GUROBI的仿真平台复刻参考文档的研究结果。,MATLAB下ADMM算法在分布式调度中的并行与串行算法应用：基于YALMIP与GUROBI的仿真研究,MATLAB代码：ADMM算法在分布式调度中的应用关键词：并行算法(Jocobi)和串行算法（Gaussian Seidel, GS) 参考文档：《主动配电网分布式无功优化控制方法》《基于串行和并行ADMM算法的电-气能量流分布式协同优化》仿真平台：MATLAB YALMIP GUROBI 主要内容：ADMM算法在分布式调度中的应用复刻参考文档 ,关键词：ADMM算法; 分布式调度; 并行算法(Jocobi); 串行算法(Gaussian Seidel, GS); MATLAB代码; YALMIP; GUROBI; 主动配电网; 无功优化控制方法; 能量流分布式协同优化。,MATLAB实现：ADMM算法在分布式调度中的并行与串行优化应用

“考虑P2G、碳捕集与碳交易机制的综合能源系统优化调度模型研究”,考虑电转气P2G与碳捕集设备的热电联供综合能源系统优化调度模型研究（含碳交易机制与四种算例场景分析）,考虑P2G和碳捕集设备的热电联供: “考虑P2G、碳捕集与碳交易机制的综合能源系统优化调度模型研究”,考虑电转气P2G与碳捕集设备的热电联供综合能源系统优化调度模型研究（含碳交易机制与四种算例场景分析）,考虑P2G和碳捕集设备的热电联供综合能源系统优化调度模型摘要：代码主要做的是一个考虑电转气P2G和碳捕集设备的热电联供综合能源系统优化调度模型，模型耦合CHP热电联产单元、电转气单元以及碳捕集单元，并重点考虑了碳交易机制，建立了综合能源系统运行优化模型，与目前市面上的代码不同，本代码完全复现了文档中所提出的四种算例场景，没有对比算例，买过去也没有任何意义，四种算例主要包括： 1）t不包括P2G、CCS、以及碳交易 2）t包括P2G，但是不包括CCS以及碳交易 3）t包括P2G和CCS，但是不包括碳交易 4）t包括P2G、CCS以及碳交易且最终的实现效果与文档进行对比后，虽然数值无法100%一致，但是结果以及数值曲线，几乎完全一样，此版本为目前市面上最好的园区综合能源调度代码，没有之一 ,考虑电转气（P2G）; 碳捕集设备; 热电联供综合能源系统; 优化调度模型; 碳交易机制; CHP热电联产单元; 耦合模型; 算

FS-LDM培训材料(DAY_2)_NCR数据仓库事业部.ppt: FS-LDM培训材料(DAY_2)_NCR数据仓库事业部.ppt

专题平面向量的数量积（学生版）20250222.pdf: 专题平面向量的数量积（学生版）20250222.pdf

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论