javascript中的事件介绍以及兼容性(一)[鼠标事件,键盘事件,event,目标事件,表单事件]

最新推荐文章于 2022-08-31 08:30:39 发布

梳碧湖-砍柴人

最新推荐文章于 2022-08-31 08:30:39 发布

阅读量372

点赞数 1

本文链接：https://blog.csdn.net/weixin_44870681/article/details/90485452

版权

一. 事件类型
(1)事件的定义
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。（可以理解为接受了指令才会去完成）
（2）事件类型：
事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。
（3）事件目标：
事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户端 js 的应用程序中，Window、Document、和 Element 对象是最常见的事件目标，但是某些事件也是由其它类型的对象触发的。
（4）事件处理程序或事件监听程序：
我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即： click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
（5）事件对象：
事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。
所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性。
（6）事件传播：
事件传播是浏览器决定那个对象触发其事件处理程序的过程。
二.事件模型
（1）.内联模型:
指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离,所以不建议使用,要保证页面的简洁性,以及体验度.
（2）.脚本模型:
由于内联模型违反了html和js的分离原则,为了解决这个问题,我们可以在JavaScript中处理事件,这种处理方式就是脚本模型.
（3）.DOM2模型:
定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventListener()和removerEventListenner().它们都接受3个参数:事件名,函数,冒泡或捕获的布尔值.
三.传统事件
1.鼠标事件：
在这里插入图片描述
(1)onclick:用户点击某个对象时调用的事件.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(1)onclick点击事件
				//给获取到的div元素注册/添加一个点击事件
				//或者可以理解为添加一个监听的处理程序
				//然而这种添加事件的方式属于比较传统的方式
				divElement.onclick=function(){
					divElement.style.background='green';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(2).oncontextmenu:在用户点击鼠标右键打开上下文菜单时触发
(3)ondblclick:用户双击某一对象时调用的事件(鼠标左键)
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(3)ondblclick:用户双击某一对象时调用的事件
				divElement.ondblclick=function(){
					divElement.style.background='blue';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(4)onmousedown:鼠标按钮被按下调用的事件(鼠标左键/右键).
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(4)onmousedown:鼠标按钮被按下调用的事件(鼠标左键/右键)
				divElement.onmousedown=function(){
					divElement.style.borderRadius=20+'px';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(5)onmouseenter:鼠标指针移动到某一对象上(悬浮).
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(5)onmouseenter:鼠标指针移动到某一对象上(悬浮)
				divElement.onmouseenter=function(){
					divElement.style.background='pink';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(6)onmouseleave:鼠标离开对象时.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(6)onmouseleave:鼠标离开对象时.
				divElement.onmouseleave=function(){
					divElement.style.borderRadius=50+'%';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(7)onmousemove:鼠标被移动时
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(7)onmousemove:鼠标被移动时
				divElement.onmousemove=function(){
					divElement.style.borderRadius=50+'%';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(8)onmouseup:鼠标按键被松开.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(8)onmouseup:鼠标按键被松开.
				divElement.onmouseup=function(){
					divElement.style.borderRadius=50+'%';
					divElement.style.background='aqua';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(9)onmousewheel:鼠标滑轮事件.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(9)onmousewheel:鼠标滑轮事件.
				divElement.onmousewheel=function(){
					divElement.style.background='yellow';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(10)onmouseover:鼠标移到某个元素之上.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(10)onmouseover:鼠标移到某个元素之上.
				divElement.onmouseover=function(){
					divElement.style.background='grey';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

(11)onmouseout:鼠标从某元素离开.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var divElement=document.getElementsByClassName('div1')[0];//获取页面的div
				//(11)onmouseout:鼠标从某元素离开.
				divElement.onmouseout=function(){
					divElement.style.background='grey';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div>
	</body>
</html>

2.键盘事件：
在这里插入图片描述
(1)onkeydown:某个键盘按键被按下.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//获取页面元素
				var text1=document.getElementById('txt1');
				var span=document.getElementById('span1');
				text1.onkeydown=function(){
					//在键盘按下的时候 将信息(填入完整的内容) 写进span标签中
					span.innerHTML='填入完整内容'
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<span id="span1"></span>
	</body>
</html>

(2)onkeypress:某个键盘按键被按下并松开.
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//获取页面元素
				var text1=document.getElementById('txt1');
				var span=document.getElementById('span1');
				text1.onkeypress=function(){
					span.innerHTML='填入完整的内容 按下并松开发生';
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<span id="span1"></span>
	</body>
</html>

(3)onkeyup:某个键盘按键被松开
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//获取页面元素
				var text1=document.getElementById('txt1');
				var span=document.getElementById('span1');
				text1.onkeyup=function(){
					span.innerHTML='填入完整的内容 松开发生';
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<span id="span1"></span>
	</body>
</html>

问题来了:我们如何如何获取到键盘的字符?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function myform(event){
				//keyCode获取按下的键盘按键Unicode值,属性返回onkeypress事件触发的键的值得字符代码,或者onkeyup或onkeydown事件的键的代码.
				var code=event.keyCode;		
				//如果需要将Unicode值转换为字符,可以使用formCharCode()方法
				//formCharCode()方法可以接受一个指定的Unicode值,然后返回一个字符串(详解参考菜鸟教程)
				var str2=String.fromCharCode(code);
					document.getElementById('demo').innerHTML='数字:'+code+'=字符'+str2;
			}
		</script>
	</head>
	<body>
		<p>请输入键盘按键</p>
		<input type="text" size="40" onkeypress="myform(event)"/>
		<p id="demo"></p>
	</body>
</html>

3.事件对象EVent
(1)什么是事件对象?
在触发DOM上的事件时,会产生一个事件的对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息.
(2)event对象的兼容性写法
event事件对象不能兼容所有的浏览器,我们一般采用下面这种方式进行兼容
var oEvent=ev || event; 如果参数不是 ev 而是 event 的时候，兼容方式也可以写成下面这种格式。 document.οnclick=function(event){ var oEvent=event || window.event; console.log(oEvent); }
(3)event常用属性有哪些?
oEvent.type:获取绑定事件的类型
oEvent.target:(在IE中用event.srcElement)返回触发事件的元素.
oEvent.currentTarget:(IE低版本中不存在)表示当前所绑定事件的元素
例如:

<script type="text/javascript">
	window.onload=function(){
		document.onclick=function(ev){
			//将事件的对象参数ev 或者event添加给变量oEvent;
			var oEvent=ev || event;
			//通过设置oEvent.target 或者oEvent.srcElement 返回触发事件的元素
			var onCurrent=oEvent.target || oEvent.srcElement;
			console.log(onCurrent);  //返回结果为:"[object HTMLInputElement]"
			//表示当前所绑定事件的元素
			console.log(oEvent.currentTarget); //返回结果为:"[object HTMLDocument]"
			console.log(oEvent.type); //输出结果为:"click"
		}
	}
</script>

4.目标事件：
在这里插入图片描述
5.表单事件：

例如：

<script type="text/javascript">
	window.onload=function(){
		//获取form表单,从而添加提交事件
		var form=document.getElementById('form1');
		form.onsubmit=function(){
			//表示通过name获取表单元素的值
			var name=document.form1.text1.value;
		}
	}
</script>
...........
<body>
	<form name="form1" action="" id="form1" method="post">
		<input type="text" value="" name="text1" />
		<br />
		<input type="submit"  name="submit_01" value="提交"/>
	</form>
</body>

例如:提交表单事件:输入两次密码一致时,登陆成功,否则重新输入

<script type="text/javascript">
// 输入两次密码一致时,登陆成功,否则重新输入
	function form_submit(){
		var pwd1=document.for1.pwd.value;
		var pwd2=document.for1.pwd1.value;
		if(pwd1!=''|| pwd1!=null && pwd2!='' || pwd2!=null){				
			if(pwd1==pwd2){
				return true; //提交成功
			}else if{
				alert('密码不一致,请重新输入');
				document.for1.pwd.value='';
				document.for1.pwd.focus(); //添加焦点
				document.for1.pwd1.value='';
				return false;
			}else{
				alert('密码不可以为空.....');
			}
		}	
	}
</script>
.......................
<body>
	<form action="success.html" name="for1" onsubmit="return form_Submit();" method="post">
	    会员名:<input type="text" name="username" />
	    <br />
	    密码:<input type="password" name="pwd" />
	    <br />
	    确认密码:<input type="password" name="pwd1" />
	    <br />
	    <input type="submit" />
	</form>
</body>

问题来了？:
鼠标离开(失去焦点事件)文本框1的时候,将其文本框值转换为大写/鼠标放进(获得焦点事件)文本框1的时候,将其背景颜色转换为红色.

<script type="text/javascript">
	//问题:鼠标离开(失去焦点事件)文本框1的时候,将其文本框值转换为大写
	function blur_01(value){
		TextUpperCase(value);//在一个函数中调用另一个函数
	}
	//以下这个函数是用来转换为大写的函数
	function TextUpperCase(value){
		document.write(value.toUpperCase());
	}
	//鼠标放进(获得焦点事件)文本框1的时候,将其背景颜色转换为红色
	function focus_01(color){
		//document.getElementById('fname').style.background=color;
		//上句代码的转化(另一种书写格式)
		var color1=document.getElementById('fname');
		color1.style.background=color;
	}
</script>
....................
<body>
	<!--blur_01(this.value): this指向的是事件的目标 在这里是第一个input文本框-->
	<p>请输入你的英文名字: <input type="text" id="fname" onfocus="focus_01('red');" onblur="blur_01(this.value)"></p>
	<p>请输入你的年龄: <input type="text" id="age"></p>
</body>

问题来了:如何判断表单元素不可以为空?

<script type="text/javascript">
	function btn_Click(){
		var myform=document.getElementById('myform');
		for (var i=0;i<myform.length;i++) {
			if(myform.elements[i].value==""){
				alert(myform.elements[i].title+"不能为空!");
				myform.elements[i].focus();
				return;
			}
			else{
				document.write('恭喜你中奖了')
			}
		}
		myform.submit();
	}
</script>
...........
<body>
	<form name="for1" id="myform">			
	    账户:<input type="text" name="username"  value="请输入InLett账户" onfocus="focu();" onblur="blu();" />
	    <span id="span1"></span>
	    <br />
	   	 密码:<input type="password" name="pwd" value="****"  />
	    <br />
	    <input type="button" name="deng" value="登录" onclick="btn_Click();" />
	</form>
</body>

6.动画事件：
在这里插入图片描述
7.过渡事件：

梳碧湖-砍柴人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中的事件介绍以及兼容性(一)[鼠标事件,键盘事件,event,目标事件,表单事件]

一. 事件类型(1)事件的定义指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。（可以理解为接受了指令才会去完成）（2）事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。（3）事件目标：事件目...
复制链接

扫一扫