js中的onchange和onpropertychange (onchange无效的解决方法)

笔者注:今天我在用到onchange事件时没有任何反应,最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下(幸亏有这个性能,做出的东西老板娘很满意 o(∩_∩)o...)。

本人也比较懒,自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下:

IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来捕获。例如一个

<input name="text1" id="text1" />

对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。(是实时性捕捉到的)

也就是说:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件!

如:

例1:

请输入图片地址: <input type="text" name="mytext" size="10" value="" onpropertychange="document.images['myimg'].src=this.value;" /> <img id="myimg" src="/img/common/logo.gif" alt="" />

当text框中的内容被改变时,图片就会立刻被显示出来。而如果用onchange时,改变其值时还需用鼠标单击空白或其他地方使input元素失去焦点(onblur)才能激活该事件,图片显示才会被改变!

例2:

<INPUT id="image" style="WIDTH: 448px; HEIGHT: 22px"     onpropertychange="preview.src=image.value" type="file" size="55" name="File1" runat="server">

<IMG id="preview" height="170" alt="" src="" width="256">

----------------------------------------------------------------

onpropertychange事件太可爱了,我对它一见钟情

onChange:当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

所以说当对象的value被脚本改变时不会触发onChange事件,因为用户即没有动鼠标又没动键盘.

(0)

相关推荐

  • js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

  • php ci框架中加载css和js文件失败的原因及解决方法

    在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架, 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource

  • js实现window.open不被拦截的解决方法汇总

    本文实例讲述了js实现window.open不被拦截的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了. 二.分析: 在谷歌搜索有没有解决方法,有些说可以通过新建a标签,模拟点击来实现,但是测试发现都实现不了,照样被浏览器拦截. 最后找到了一个折中的办法,可以实现新页面打开,但是没有a标签的那种直接流量新页面的效果. 三.实现代码: 复制代码 代码如下:

  • Ajax局部更新导致JS事件重复触发问题的解决方法

    如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------

  • php中json_encode处理gbk与gb2312中文乱码问题的解决方法

    本文讲述了php中json_encode处理gbk与gb2312中文乱码问题的解决方法,具体方法如下: 1.json_encode()中文在gbk/gb2312中对中文返回为null $arr = array ( array ( 'catid' => '4', 'catname' => 'www.jb51.net', 'meta_title' => '我们' ) ); echo json_encode($arr); 运行结果: [{"catid":"4&qu

  • js防止DIV布局滚动时闪动的解决方法

    本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /

  • js处理php输出时间戳对不上号的解决方法

    由PHP传入JS处理的时间戳我说怎么老是对不上号呢,原来JS时间戳为13位,包含3位毫秒的,而PHP只有10位不包含毫秒的. var nowtime = (new Date).getTime();/*当前时间戳*/ /*转换时间,计算差值*/ function comptime(beginTime,endTime){ var secondNum = parseInt((endTime-beginTime*1000)/1000);//计算时间戳差值 if(secondNum>=0&&s

  • ajax跨域请求js拒绝访问的解决方法

    求解决办法 复制代码 代码如下: ajax{ url :"http://xxxx/app", type:"POST"; dataType:"json", } 不能用jsonp 因为jsonp发送数据 type 为 get type 必须为post url 不能加参 (例:http://xxxx/app?callback=aaa) 返回数据位json格式.求方法

  • js onmousewheel事件多次触发问题解决方法

    我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下: 我最初的代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> div { width: 700px; height: 1000px; } .red { back

  • 页面js遇到乱码问题的解决方法是和无法转码的情况

    今日遇到一个棘手的问题,在老项目里加些js文件和老项目的编码格式不一致出现乱码.老页面是GB2312,链入的js文件是UTF-8,两个文件都不能转格式. 第一个想法就是将js文件中的中文转换为unicode编码.这种做法是建立在牺牲可读性的条件下的,中文全都变成密码了. 事后想想应该还有更好的方法吧,然后就去百度,方法如下: 复制代码 代码如下: <script type='text/javascript' src='xxxuft.js' charset='utf-8'></script

  • js 赋值包含单引号双引号问题的解决方法

    我的页面是jsp页面,里面包含一个参数:lefttree, 这个lefttree是从后台拼出来的,内容是html代码:如: 复制代码 代码如下: <div class="test" onclick="show('tt1','abc')"> 在jsp页面中,需要通过js代码将这个值付给一个div,如下: 复制代码 代码如下: <script type="text/javascript"> window.parent.docu

随机推荐