JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件
将 js里面的事件简单分为: 键盘事件 鼠标事件 窗口事件 移动端的事件(触屏)
事件 | 描述 |
click、doubleclick | 鼠标单击事件,双击事件 |
mouseenter | 鼠标进入 |
mouseleave | 鼠标离开 |
mouseover、 mouseout | 将鼠标移到元素上,将鼠标移开 |
mousemove | 鼠标移动 |
mousedown、mouseup | 按下鼠标键,松开鼠标键 |
keydown、keyup、keypress | 按下一个键,松开一个键,按下再松开一个键 |
load | 网页导入 |
unload | 关闭网页 |
focus | 光标聚焦 |
blur | 光标离开 |
contextmenu | 单击鼠标右键 |
change | 文本框内容改变 |
select | 文本框内容选中 |
1.鼠标单击事件(onclick)
onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。
示例:单击按钮,另打开一个网页
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单击事件 </title>
<script type="text/javascript">
function openwin(){
window.open('https://www.jd.com','_blank','height=600,width=1024,top=0,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
// scrollbars=no 不显示滚动条, resizable = no 不能调整大小, status = no 不显示状态栏, toolbar = no 不显示工具栏, menubar = no 不显示菜单栏
</script>
</head>
<body>
<form>
<input name="京东" type="button" value="京东" onclick="openwin()"/>
</form>
</body>
</html>
2.鼠标进入事件(onmouseenter)
鼠标进入事件,当鼠标移到一个对象上时,该对象就触发onmouseenter事件,并执行onmouseenter事件调用的程序。
示例:当鼠标移入到确定按钮时
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后,再单击确定!"); } //confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" mouseenter="message()"> <!--与mouseover类似-->
</form>
</body>
</html>
3.鼠标移开事件
鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序
示例:鼠标点击时进入淘宝页面,离开时就会弹出一个对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开,点击后有惊喜哦!"); }
</script>
</head>
<body>
<form>
<a href="http://www.taobao.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
4、光标聚焦事件(onfocus)
当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
示例:当光标聚集到选项框时,会出现对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择,您现在的职业!");
}
</script>
</head>
<body>
请选择您的职业:<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
5.失焦事件(onblur)
当网页中的对象失去聚点时,执行onblur调用的程序就会被执行。
示例:填写用户名和密码,在填写用户名后鼠标离开,会弹出对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入用户名后,再移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名!" onblur="message()">
密码:<input name="password" type="text" value="请输入密码!" >
</form>
</body>
</html>
6.内容选中事件
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message() {
alert("您触发了选中事件!");
}
</script>
</head>
<body>
<form>
请从下列文字中选出你喜欢的一段话:<br>
<!-- cols 规定文本区内的可见宽度。 rows 规定文本区内的可见行数。
<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本-->
<textarea name="summary" cols="80" rows="3" onselect="message()">
安于本分,不求进取,就不可能垒高自己,不可能迈向更高的目标。
无论是谁都应该相信“世界上没有越不过的高峰,没有办不成的事情”,
只有垒高自己,有所追求,才能知道大树的挺拔,长江的伟岸,大海的浩瀚……</textarea>
</form>
</body>
</html>
7、文本框内容改变事件(onchange)
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容!"); }
</script>
</head>
<body>
<form>
个人简介:<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>
</form>
</body>
</html>
8、加载事件(onload)
事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:
- 加载页面时,触发onload事件,事件写在<body>标签内。
- 此时的加载页面,可理解为打开一个新页面时。
示例:当加载一个新页面时,弹出对话框“加载中,请稍等…”点确定以后会出现页面内容
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中,请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
9、卸载事件(onunload)
当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。
注意:不同浏览器对onunload事件支持不同。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
</script>
</head>
<body>
我们即将迎来2019!
</body>
</html>