1. onchange
- 定义和用法
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。 - 语法
HTML 中:
<input onchange="SomeJavaScriptCode">
JavaScript 中:
object.onchange=function(){SomeJavaScriptCode};
| 参数 | 描述 |
|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
- 浏览器支持
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);
| 事件 | Internet Explorer | Firefox | Opera | Google Chrome | Safari |
|---|
| output | 9.0 | 4.0 | yes | yes | 5.0 |
| 是否支持冒泡: | Yes |
|---|
| 是否可以取消: | NO |
| 事件类型: | Event |
| 支持的 HTML 标签: | <input type="password">, <input type="search">, <input type="text"> 和 <textarea> |
4. addEventListener
- 定义和用法
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 - 语法
element.addEventListener(event, function, useCapture)
| 参数 | 描述 |
|---|
| event | 必须。 字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。 指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。 布尔值,指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执、false- false- 默认。事件句柄在冒泡阶段执行 |
| 方法 | Internet Explorer | Firefox | Opera | Google Chrome | Safari |
|---|
| addEventListener() | 9.0 | 1.0 | 7.0 | 1.0 | 1.0 |
| DOM 版本: | DOM Level 2 Events |
|---|
| 返回值: | 没有返回值 |
| 记录: | 在 Firefox 6 和 Opera 11.60 中 useCapture 参数是可选的。 (在 Chrome、IE 和 Safari 中一直都是可选的)。 |