input内容改变的触发事件

文章目录

1. onchange2. onpropertychange3. output4. addEventListener

1. onchange

定义和用法

onchange 事件会在域的内容改变时发生。

onchange 事件也可用于单选框与复选框改变后触发的事件。语法

HTML 中：

<input onchange="SomeJavaScriptCode">

JavaScript 中：

object.onchange=function(){SomeJavaScriptCode};

浏览器支持

Internet Explorer、Firefox、Opera、Google Chrome、Safari支持 onchange 事件的 HTML 标签

onchange 属性可以使用于：<input>、<select>、<textarea>。注意在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change的function()或者调.change()方法。

2. onpropertychange

定义和用法

onpropertychange会实时触发，会在元素的属性改变时就触发事件。语法

<input type="text" onpropertychange="functionName()">

浏览器支持

Internet Explorer注意

当元素disable=true时不会触发。

3. output

定义和用法oninput事件在用户输入时触发。该事件在<input>或<textarea>元素的值发生改变时触发。提示：该事件类似于onchange事件。不同之处在于oninput事件在元素值发生变化是立即触发，

onchange 在元素失去焦点时触发。另外一点不同是onchange事件也可以作用于<keygen>和<select>元素。语法

HTML：

<input oninput="myScript">

JavaScript：

object.oninput=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法：

object.addEventListener("input", myScript);

浏览器支持注意

4. addEventListener

定义和用法

addEventListener()方法用于向指定元素添加事件句柄。

提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。语法

element.addEventListener(event, function, useCapture)

参数浏览器支持注意