JavaScript 中的事件介绍以及兼容

最新推荐文章于 2023-04-06 14:27:18 发布

wuke666666

最新推荐文章于 2023-04-06 14:27:18 发布

阅读量176

点赞数 1

文章标签：事件

本文链接：https://blog.csdn.net/wuke666666/article/details/84992857

版权

一、JavaScript 中的事件介绍以及兼容

1.事件类型

（1）定义

指的是文档或浏览器窗口中发生的一些特定交互瞬间。可以通过侦听器（处理程序）来预定事件，以使事件发生的时候执行相应的代码（一般程序需接收一个指令才完成的一个行为）。

事件类型

是一个用来说明发生什么类型事件的字符串。eg:鼠标、键盘、加载、点击事件

事件目标

事件目标是发生的事件或与之相关的对象。但是某些事件也是由其它类型的对象触发的。常用的事件目标有：window、按钮、文本框、document。

window.οnlοad=function(){函数体}

window表示时间目标

onload表示事件类型

=function(){}表示事件的处理程序

事件处理程序或事件监听程序

响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。

事件对象

事件对象是与特定事件相关且包含有关该事件详细信息的对象。

事件传播

事件传播是浏览器决定那个对象触发其事件处理程序的过程。

（2）事件模型

1) 内联

指的是行间的事件，写入HTML标签中，这种写法不能保证内容和结构进行分离，所以不建议使用，要保证页面的简洁性以及体验度。

2) 脚本

由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，所以将处理程序以脚本的形式嵌入页面。

3）DOM2模型

定义了两个方法，用于添加事件和删除事件处理程序的操作。

addEventListener()和 removeEventListener();所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。

（3）传统的事件类型

1）鼠标事件

onclick：点击某个对象时调用的事件句柄

oncontextmenu：点击右键打开上下文菜单时触发(点击)

ondblclick：双击某个对象时调用的事件句柄

onmousedown：鼠标按钮被按下

onmouseenter：添加鼠标悬浮事件

onmouseleave：鼠标移出元素时触发

onmousemove：鼠标被移动

onmouseover：鼠标移到某元素上

onmouseout：鼠标从某元素移开

onmouseup：鼠标按键被松开

onmousewheel：鼠标滑轮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标事件</title>
		<style type="text/css">
			.div1 {
				width: 300px;
				height: 300px;
				border: solid tomato;
			}
		</style>
		
		<script type="text/javascript">
			window.onload=function(){
				//获取页面div元素
				var divElement=document.getElementsByClassName('div1')[0];
				//给获取到的div元素注册/添加一个点击事件 
				//或者可以理解为添加一个监听的处理程序
				divElement.onclick=function(){  //点击某个对象时调用的事件句柄
					divElement.style.transform='scale'+'('+'1.5'+')';
				}
				divElement.oncontextmenu=function(){  //点击右键打开上下文菜单时触发(点击)
					divElement.style.marginLeft=100+'px';
				}
				divElement.ondblclick=function(){  //双击某个对象时调用的事件句柄
					divElement.style.background='black';
				}
				divElement.onmousedown=function(){  //鼠标按钮被按下
					divElement.style.borderRadius=20+'px';
				}
				divElement.onmouseenter=function(){  //添加鼠标悬浮事件
					divElement.style.borderBottomColor='deepskyblue';
				}
				divElement.onmouseleave=function(){  //鼠标移出元素时触发
					divElement.style.borderTopLeftRadius=80+'px';
				}
				divElement.onmousemove=function(){  //鼠标被移动
					divElement.style.marginTop=120+'px';
				}
				divElement.onmouseover=function(){  //鼠标移到某元素上
					divElement.style.borderBottomWidth=5+'px';
				}
				divElement.onmouseout=function(){  //鼠标从某元素移开
					divElement.style.borderRadius=50+'%';
				}
				divElement.onmouseup=function(){  //鼠标按键被松开
					divElement.style.background='gray';
				}
				divElement.onmousewheel=function(){  //鼠标滑轮
					divElement.style.transform='bisque';
				}
			}
		</script>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

2）键盘事件

onkeydown:某个键盘被按下

onkeyup:某个键盘被松开

onkeypress:某个键盘被按下并松开

	window.onload=function(){
				var text1=document.getElementById('txt1');
				var span=document.getElementById('span1');
				//text1.onkeydown=function(){
					//在键盘按下的时候 将信息(填入完整的内容) 写进span标签中
					//span.innerHTML='填入内容';
				//}
//				text1.onkeyup=function(){
//					span.innerHTML='填入完整的内容并松开';
//				}
//				text1.onkeypress=function(){
//					span.innerHTML='填入完整的内容按下并松开';
//				}

3)事件对象 Event

event 对象的兼容写法

event 事件对象不能兼容所有的浏览器，我们一般是采用下面这种方式进行兼容。
var oEvent=ev || event; 如果参数不是 ev 而是 event 的时候，兼容方式也可以写成下面这种格式。
document.onclick=function(event){
var oEvent=event || window.event; console.log(oEvent);
}

//测试代码：
<script>
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev || event;
console.log(event);
}
</script>

event属性

oEvent.type:获取绑定的事件类型，click、mouseover等

oEvent.target:(在IE低版本中使用event、srcElement)，返回触发事件的元素，object

oEvent.currentTarget;IE低版本不存在，表示当前绑定事件的元素

表单事件

onblur：元素失去焦点时触发

onfocus：获取焦点时触发

onchange：该事件在表单的内容改变时触发

onselect：用户选取文本是触发

oninput：元素获取用户时触发

onsearch：用户向搜索域输入文本时触发

onsubmit：表单提交时触发

onfocusic：元素即将获取焦点时触发

onfocusout：元素即失去焦点时触发

onreset：表单重置时触发

//失焦和获焦的案例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function focus_01(color){
				var color1=document.getElementById('name1');
				color1.style.background=color;
			}
			
			function blur_01(value){
				function textfunction(value){//形参
					document.write(value.toUpperCase());
				}
				textfunction(value);//实参
			}
		</script>
	</head>
	<body>
		<p>请输入英文名字:
			<input type="text" name="aaa" id="name1" onfocus="focus_01('red');" onblur="blur_01(this.value);"/>
		</p>
		<p>请输入年龄:
			<input type="text" id="age"/>
		</p>
	</body>
</html>

//表单提交案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//获取form表单,从而添加提交事件
				var form2=document.getElementById('form1');
				form2.onsubmit=function(){
					//通过name获取表单元素的值
					var userName=document.form2.text1.value;
				}
			}
		</script>
	</head>
	<body>
		<form action="submit.html" method="post" name="form2" id="form1">
			<input type="text" name="text1" value=""/>
			<input type="submit" name="sub_01" value="提交"/>
		</form>
	</body>
</html>