JavaScript中的事件

来源：互联网发布：juniper client mac 编辑：程序博客网时间：2024/06/09 19:24

Javascript是一个基于对象的语言，它的一个最基本的特征就是采用事件驱动，通常鼠标或者键盘的动作称之为事件。有鼠标或键盘引发的一连串程序

动作称之为事件驱动。那么,它都有哪几种事件呢?

现在,我们来一起了解一下

一.灵活运用鼠标事件（onclick、onmouseover、onmouseout、onmousemove）

1.Onclick：鼠标单击事件，当鼠标单击时此事件触发

(举个例子,实践一下,例如：单击鼠标按钮更改页面的背景颜色)

 <meta charset=utf-8><input type='button' value="更改背景颜色" onclick='fun()'><script>function fun(){document.bgColor='red'}</script>

2.Onmouseover：鼠标移上事件，当鼠标移上某个元素时此事件触发

3. Onmouseout：鼠标移出事件，当鼠标移出某个元素时此事件触发

例如：鼠标移到p标签上的时候更改文字内容

<meta charset=utf-8><a id='content' onmouseover='fun()' href='' onmouseout='fun2()'>请移动上来</a><script>function fun(){document.getElementById("content").innerHTML='我被改变了'}function fun2(){document.getElementById("content").innerHTML='请移动上来'}</script>

4.Onmousemove：鼠标移动事件，当鼠标在某个元素上移动的时候此事件触发

例如：当鼠标经过图片的时候给出提示

<meta charset=utf-8><img src='a.jpg' onmousemove='fun()'> <script>function fun(){alert("鼠标经过我啦！")}</script>

二.灵活运用键盘事件（onkeydown、onkeyup、onkeypress）

1.nkeydown：键盘按下事件，当按下键盘的时候此事件触发

例如：按下键盘时给出提示

<meta charset=utf-8><input type='text' id='username' onkeydown='fun()' > <script>function fun(){alert("键盘按下了!")}</script>

2.Onkeyup：键盘抬起事件，当抬起键盘的时候此事件触发

例如：抬起键盘时给出提示

<meta charset=utf-8><input type='text' id='username' onkeyup='fun()' > <script>function fun(){alert("键盘抬起了!")}</script>

三.灵活运用页面事件（onload、onunload）

1. Onload：页面加载事件，当打开这个页面的时候此事件触发

2. Onunload：页面卸载事件，当关闭页面的时候此事件触发

例如：加载文档的时候提示欢迎光临，关闭时提示谢谢

<meta charset=utf-8" /><script type="text/javascript">function aa(){alert("欢迎xxx光临");}function bb(){alert("谢谢huigu");}</script><body onload="aa()" onunload="bb()"></body>

三.灵活运用表单事件（onblur、onsubmit、onchange）

1.Onblur：失去焦点事件，当光标离开文本框时此事件触发

例如：失去焦点的时候验证用户名和密码非空

<script>function check_name(){var name=document.getElementById("name").value;if(name==""){document.getElementById("s_name").innerHTML="<font color='red'>用户名不能为空</font>";return false;}else{document.getElementById("s_name").innerHTML="";return true;}}function check_pwd(){var name=document.getElementById("pwd").value;if(name==""){document.getElementById("s_pwd").innerHTML="<font color='red'>密码不能为空</font>";return false;}else{document.getElementById("s_pwd").innerHTML="";return true;}}</script><form action='第一天检测.html' >用户名：<input type='text' id='name' onblur='check_name()'><span id='s_name'></span><p>密码：<input type='text' id='pwd' onblur='check_pwd()'><span id='s_pwd'></span><p><input type='submit' value='登录' ></form>

2.Onsubmit：表单提交事件，当点击提交按钮的时候此事件触发

例如：点击提交按钮的时候判断用户名和密码框不为空才能提交

<form action='第一天检测.html' onsubmit='return sub()'>用户名：<input type='text' id='name' onblur='check_name()'><span id='s_name'></span><p>密码：<input type='text' id='pwd' onblur='check_pwd()'><span id='s_pwd'></span><p><input type='submit' value='登录' ></form><script>function check_name(){var name=document.getElementById("name").value;if(name==""){document.getElementById("s_name").innerHTML="<font color='red'>用户名不能为空</font>";return false;}else{document.getElementById("s_name").innerHTML="";return true;}}function check_pwd(){var name=document.getElementById("pwd").value;if(name==""){document.getElementById("s_pwd").innerHTML="<font color='red'>密码不能为空</font>";return false;}else{document.getElementById("s_pwd").innerHTML="";return true;}}//表单提交验证的函数function sub(){//当用户名验证和密码验证都合法的时候才进行表单提交if(check_name()&&check_pwd()){return true;}else{return false;}}</script>

2.Onchange：内容改变事件，当改变内容时此事件触发

例如：改变下拉框的值来改变背景颜色

<meta charset=utf-8>请选择背景颜色：<select id='data' onchange='fun()'><option value='red'>红色</a><option value='yellow'>黄色</a><option value='blue'>蓝色</a></select><script>function fun(){var i=document.getElementById("data").value;document.bgColor=i;}</script>

以上都是个人总结,对你有用的话,就给个赞吧

1 0