JavaScript中的事件_采用事件驱动是javascript语言的一个最基本特征,请问添加以下哪个事件会触发鼠标-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangzhangdan/article/details/52003343

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

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

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

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

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

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

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

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

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

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

<meta charset=utf-8>
<a id='content' οnmοuseοver='fun()' href='' οnmοuseοut='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' οnmοusemοve='fun()'> 
<script>
function fun(){
	alert("鼠标经过我啦！")
}
</script>

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

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

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

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

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

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

<meta charset=utf-8>
<input type='text' id='username' οnkeyup='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 οnlοad="aa()" οnunlοad="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' οnblur='check_name()'>
<span id='s_name'></span><p>
密码：
<input type='text' id='pwd' οnblur='check_pwd()'>
<span id='s_pwd'></span><p>
<input type='submit' value='登录' >
</form>

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

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

<form action='第一天检测.html' οnsubmit='return sub()'>
用户名：
<input type='text' id='name' οnblur='check_name()'>
<span id='s_name'></span><p>
密码：
<input type='text' id='pwd' οnblur='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' οnchange='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>

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