JavaScript_4th_事件处理

来源：互联网发布：linux 获取未激活网卡编辑：程序博客网时间：2024/05/16 03:15

一、JavaScript事件处理
当网页上发生某些事情时，可以调用函数或语句做出相应的处理。
1）onfocus：在用户为了输入而选择select、text、textarea等时。
2）onbulr：在select、text、password、textarea失去焦点时。
3）onchange：在select、text、textarea的值被改变且失去焦点时。
4）onclick：在一个对象被鼠标点中时。
5）onload：出现一个文档在浏览器窗口中完成加载的时候，一般写在body标签中。
6）onunload：当前文档被替换时，如刷新本页面，就会触发该事件。
7）onmouseover：鼠标被移动到一个对象上时。
8）onmouseout：鼠标从一个对象上移开时。
9）onselect：当form对象中的内容被选中时。
10）onsubmit：出现在用户通过提交按钮提交一个表单时。

二、介绍
1）onFocus事件
在用户为了输入而选择select、text、textarea等时

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form name="test"><input type="text" name="userName" value="SXT" onfocus="JavaScript:alert(document.test.userName.value)" /></form></body></html>

总结：其中"JavaScript:"表示后面是JavaScript语句，"JavaScript:"可以省略。

2）onClick事件
单击事件，在一个对象被鼠标点中时。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><img src="../img/btn_reg.gif" onclick="alert('ok')" /></body></html>

总结：
①当点击图片时，会弹出ok字样的弹窗。
②alert('ok')为什么用了单引号，因为外面是双引号。

3）onload事件和onunload事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body onload="alert('hello');" onunload="alert('bye-bye!');" ></body></html>

总结：当打开本页面时，当前文档加载完成，触发onload事件，弹出hello，刷新本页面时候，由于本页面被替代，触发onunload事件，弹出bye-bye!。

4）onmouseover事件和onmouseout事件
onmouseover：鼠标被移动到一个对象上时。onmouseout：鼠标从一个对象上移开时。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><img src="img.jpg" onmouseover="alert('over')" onmouseout="alert('out')" /></body></html>

总结：当鼠标移动到图片上时，弹出'over'，当鼠标移出图片时，弹出'out'。

5）onselect事件
当form对象中的内容被选中时。
如ctrl+A选中文本框中的内容时,该事件发生，用户可以实现一个弹窗效果。

6）onSubmit事件
①表单中input标签的type="submit" 表示这是一个提交按钮。
②onsubmit事件出现在用户通过提交按钮提交一个表单时，当用户点击提交按钮，会触发onsubmit事件，进行相应动作，如：弹窗，当点击确定后，才会将当前页面的表单中的数据提交到action指定的文件中。
③注意：onsubmit要写在form标签中。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript"></script></head><body><form  name="test" action="../base/001_helloworld.html" onsubmit="alert('ok');" ><input type="submit" value="ok" /></form></body></html>

总结：
①点击ok提交按钮后会弹出ok弹窗，然后执行001_helloworld.html中的内容。
②当onsubmit为onsubmit="return false;"时，表示程序不再往下执行，即无法提交。
③当onsubmit为onsubmit="return true;"时，会直接执行001_helloworld.html中的内容。
④我们可以根据返回值来控制是否要进行提交。

下面是一个简单的表单验证。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function check() {if(document.myForm.myText.value == "") {alert("内容不能为空!");return false;}return true;}</script></head><body><form name="myForm" action="../base/001_helloworld.html" onsubmit="return check();" ><input type="text" name="myText" /><input type="submit" value="提交" /></form></body></html>

0 0