tags:”IE”

categories: “IE”

js改变value的值不触发change事件

在IE浏览器中JS改变value的值会触发change事件，但是在其他浏览器中JS改变value的值不会触发change事件的更改。所以在写change事件中判断值和设置value的值时都需要考虑IE的情况

JQ JS 改变value值不触发change事件

Change事件触发有两个必要条件：值改变、失去焦点。所以当使用JQ改变值时，控件没有失去焦点，所以不会触发。

目前验证有效的解决办法，只能是手动触发change事件
如：

  1. $('input[name="change_val"]').click(function(){
  3. $('input[name="a"]').val('a');
  5. $('input[name="a"]').change();
  7. });

在网上找了很久资料，很多人的回答是IE使用propertychange,其他浏览器使用input事件可以解决。但是自己试了下，propertychange在IE8浏览器中，JQ改变值可以，但是input在其他浏览器中是不可以的。

input事件在增加或减少字符就会触发，但是这个的前提也是需要获得焦点的，所以JQ改变值是无法触发的。

Propertychange事件在IE8测试下，在JQ改变值时这个事件是可以触发。

原理：https://www.cnblogs.com/aigeileshei/p/5682303.html

原理

需要了解的知识

首先，我们需要了解onchange和onpropertychange的不同：
IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。

onpropertychange 是IE浏览器的专属方法

了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢？
经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。

oninput的使用

下面我们先了解一下oninput如何使用。
如果您是将注册时间直接写在页面里面，那么如下写法就可以实现

  1. <input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。

attachEvent和addEventListener 的不同

说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法：

attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列
document.getElementById(“btn”).onclick = method1;
document.getElementById(“btn”).onclick = method2;
document.getElementById(“btn”).onclick = method3;

如果这样写,那么将会只有medhot3被执行

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.attachEvent(“onclick”,method1);
btn1Obj.attachEvent(“onclick”,method2);
btn1Obj.attachEvent(“onclick”,method3);

执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener

var btn1Obj = document.getElementById(“btn1”);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3

了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。

判断IE浏览器

如何将IE区分出来呢？
这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类：
其一，是判断浏览器的功能属性。
其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。
在这里就不做深入了解了，我们这里用一种比较简单的方法来判断

if(“\v”==”v”) {
alert(“IE”);
}else{
alert(“NO”);
}

1、onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。

2、oninput事件与onpropertychange事件的区别：

oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value 时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过 addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容 与行为分离）

3、oninput与onpropertychange失效的情况：

（1）oninput事件：a). 当脚本中改变value时，不会触发；b). 从浏览器的自动下拉提示中选取时，不会触发。

（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

取巧方式：

　　jQuery.fn.val方法来赋值本来就不触发change事件，但是可以手动触发。

如：$(‘#inp’).val(3353).change();