onchange与onpropertychange的联系与区别！

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量1.0k 收藏
点赞数
分类专栏： JS 文章标签： javascript html function input 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenle006/article/details/5387497
版权

onchange与onpropertychange的联系与区别！

关键字: javascript

了解这两个东东缘于同事的一个需要联动的选择需求(select0改变select1,select1然后去改变select2).
上网查了好久,也看了别人一些例子.
最后试了试,竟然不用写额外的javascript function,使用onchange 和onPropertyChange就能搞定. 例子和解释如下:
<html>
<head><title></title></head>
<body>
<select id="t0" onChange="t1.options[this.value].selected=true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="t1" onPropertyChange="t2.options[t1.options.selectedIndex+1].selected=true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select id="t2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</body>
</html>

<!-- 可以把t0的onChange换成onPropertyChange 但不能把t1的onPropertyChange换成onChange
（如果这样的话，t0改变的时候只能改变t1不能改变t2,只有点击使t1改变才能使t2改变）
-->

先看这么一段解释：
       onpropertychange：当在对象上进行属性改变时候触发
       onchange：当对象内容或者选择内容改变时候触发 

当一个HTML元素的属性改变的时候，都能通过onpropertychange来捕获。例如一个<input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。

具体可以狭义地理解为：onpropertychange能及时捕获属性值的变化，而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件！

当text框中的内容被改变时，图片就会根据输入的路径立刻被显示出来。而如果用onchange时，改变其值时还需用鼠标单击空白或其他地方才能激活该事件，图片显示才会被改变！
wenle006
关注
专栏目录
js中的onchange和onpropertychange (onchange无效的解决方法)
10-26
本文将详细讲解这两个事件的区别以及如何解决 `onchange` 事件在某些情况下的无效问题。 `onchange` 事件是JavaScript中用于监听表单元素（如输入框、选择框等）或某些可触发改变状态的元素（如复选框）在用户进行...
onchange和onpropertychange
03-22
标题中的“onchange”和“onpropertychange”是JavaScript中两个与事件相关的属性，它们都是在HTML元素上触发特定行为的事件监听器。在本文中，我们将深入探讨这两个事件的区别、用法以及如何在实际开发中应用它们。...
change、keypress、input和propertychange
萧逸才的博客
04-13 5260
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> change:<input type="text" id="change"><br> keypress:<input type="text" id="keypress"><br> propertychange:<input
oninput、onchange与onpropertychange的区别
Embiid_的博客
04-10 329
onchange事件知识在键盘或者鼠标操作改变对象的状态，value的值发生变化并且失去焦点的时候触发。onkeydown/onkeypress/onkeyup键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作。oninput是标准浏览器的事件，对于检测 textarea, input:text,input:password 和 input:search 这几个元素通过用户界面发生的内容变...
onchange与onpropertychange
piaoxuan1987
12-21 599
onpropertychange在更改一开始就触发，其实这时并没有真正更改文本框的值（你可以按下Esc键取消更改）。 onchange则在更改确认时触发（通常需要在输入新的值以后将焦点移到其它组件中，或在文本框之外单击鼠标才能确认当前更改）。 从事件触发的时机来说，onpropertychange比onchange更及时，onchange总是要等失去焦点以后才触发(在input上的时候)，
input的oninput、onchange与onpropertychange事件
qq_36412715的博客
12-19 1044
汇总onchange onpropertychange 和oninput事件的区别： onpropertychange 只在IE8及以下的版本起作用。 oninput在IE9以上版本及其他浏览器都支持。 <head> <script type="text/javascript" src="js/jquery.min.js"></script> <scr...
oninput、onchange与onpropertychange事件的区别
weixin_30914981的博客
10-29 82
oninput、onchange与onpropertychange事件的区别 onchange事件只在键盘或者鼠标操作改变对象属性，value的值发生变化且失去焦点时触发，用户js改变value时无法触发； onkeydown/onkeypress/onkeyup键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作。 oninput是标准浏览器的事件，对于检测 textarea, in...
onchange与onpropertychange的联系与区别
weixin_30790841的博客
08-12 55
先看这么一段解释：当一个HTML元素的属性改变的时候，都能通过 onpropertychange来捕获。例如一个<input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。 具体理解为：onpropertychange能及时捕获属性值的变化，而oncha...
关于 onchange，onpropertychange，oninput事件
AntHub的博客
03-19 630
转载于：https://www.cnblogs.com/aigeileshei/p/5682303.html https://www.cnblogs.com/aigeileshei/p/5682303.html JS改变input的value值不触发onchange事件解决方案 （转） 方法（一）（转载的网络资料） 需要了解的知识 首先，我们需要了解onchange和onpropertycha...
onchange，onpropertychange，oninput键盘输入和js赋值时区别
03-25
在JavaScript中，`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件，它们各自有特定的触发条件，特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释： 1. `...
JS中onpropertychange和onchange事件区别小结
01-19
也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都...
总结oninput、onchange与onpropertychange事件的使用方法和差别
极客神殿
08-03 862
前端页面开发的非常多情况下都须要实时监听文本框输入，比方腾讯微博编写140字的微博时输入框会动态显示还能够输入的字数。 过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现，可是这存在着一些不好的用户体验。 比方onchange事件仅仅在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；而onkeydown/onkeypress/onkeyup在...
JS with的使用
wenle006的专栏
11-04 313
<br />with 语句 为一个或一组语句指定默认对象。 <br /><br />用法：with (<对象>) <语句>; <br /><br />with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 new Date()的重复使用： <br /><br />with(new Date) <br />     time.innerText=getYear()+"-"+(getMonth()+1)+"-"+getDate()+" 周"+"日一二三四五六".charAt(getDay()
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 912
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 660
【代码】【JavaScript】LeetCode：707设计链表。
JavaScript事件处理：onChange与onClick案例解析
本文档详细阐述了`onChange`和`onClick`这两个事件及其用法。 `onChange`事件主要用于表单元素，当表单内的某个元素值发生变化并且失去焦点时触发。例如，下拉列表（Select）、文本输入框（Text）和多行文本区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值