JS-表单事件

来源：互联网发布：淘宝一元云购是真的吗编辑：程序博客网时间：2024/06/16 16:13

①onblur(DOM2)：事件会在元素失去焦点时触发。(如：用户离开输入框时执行，经常用于JS验证代码)

浏览器都支持~

标签都支持，除了那11种： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法：前两种~

function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

②onfocus(DOM2)：事件在对象获得焦点时发生。(通常用于<input>、<select>、<a>)(不支持冒泡)

提示：onfocus的事件的相反事件是onblur事件

浏览器都支持~

标签都支持，除了那11种： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法：三种~

③onfocusin(DOM2)：事件在一个元素即将获得焦点时触发。(支持冒泡，不可以取消，事件类型是FocusEvent)

提示：ff浏览器不支持onfocusin事件，但你可以使用onfocus(使用addEventlistener()方法的可选参数useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。

提示：onfocusin的事件的相反事件是onfocusout事件

支持的浏览器：Chrome(Yes)、IE(Yes)、FF(NO)、Safari(Yes)、Opera(Yes)

注意：在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusin 事件可能无法正常工作。但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

标签都支持，除了那11种： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法：三种~

④onfocusout(DOM2)：事件在元素即将失去焦点时触发。(支持冒泡，不可以取消，事件类型是FocusEvent)

提示：ff浏览器不支持onfocusout事件，但你可以使用onfocus(使用addEventlistener()方法的可选参数useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。

提示：onfocusout的事件的相反事件是onfocusin事件

支持的浏览器：Chrome(Yes)、IE(Yes)、FF(NO)、Safari(Yes)、Opera(Yes)

注意：在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusout 事件可能无法正常工作。但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

标签都支持，除了那11种： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法：三种~

⑤onchange：事件会在域的内容改变时发生、也可用于单选框与复选框改变后触发的事件。

浏览器都支持~

用法：前两种~

支持的标签：<input>、<select>、<textarea>

⑥oninput：事件在用户输入时触发。

提示：该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

支持的第一个浏览器型号：Chrome(Yes)、IE(9.0)、FF(4.0)、Safari(5.0)、Opera(Yes)

用法：

⑦onreset：事件在表单被重置后触发。(支持冒泡，可以取消，事件类型是Event，支持的标签是<form>、<keygen>)

支持的浏览器：Chrome(Yes)、IE(Yes)、FF(Yes)、Safari(Yes)、Opera(Yes)

用法：三种~ + object.reset();的效果也是一样

⑧onsearch：事件在用户按下“Enter(回车)”按键或点击type="search"的<input>元素的“x(搜索)”按钮时触发。(支持冒泡，不可以取消，事件类型是Event，支持的标签是<input>)

支持的第一个浏览器型号：Chrome(Yes)、IE(不支持)、FF(不支持)、Safari(Yes)、Opera(15.0)

用法：三种~

支持的标签：<input type="search">

⑨onselect：事件会在文本框的文本被选中时发生。

所有浏览器都支持~

用法：前两种~

支持的标签： <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>.

⑩onsubmit：事件在表单提交时触发。(支持冒泡，不可以取消，事件类型是Event，支持的标签是<form>、<keygen>)

支持的浏览器：Chrome(Yes)、IE(Yes)、FF(Yes)、Safari(Yes)、Opera(Yes)

用法：三种~

0 0