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 中一直都是可选的)。 |