javascaript 六事件

最新推荐文章于 2023-10-15 22:56:02 发布

DarkQE

最新推荐文章于 2023-10-15 22:56:02 发布

阅读量259

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/wwwfdfsf/article/details/126018316

版权

本文详细讲解了JavaScript中事件的注册、删除、DOM事件流的工作原理，包括捕获和冒泡阶段，以及事件对象的使用。重点介绍了事件委托，通过实例演示了如何利用事件冒泡避免子元素重复监听。涵盖了鼠标事件、键盘事件和图标跟随鼠标案例。

摘要由CSDN通过智能技术生成

一.注册事件

给元素添加事件称为注册事件或者绑定事件

注册事件两种方式：传统方式和方法监听注册方式

传统方式：利用on开头比如：onclick

方法监听注册方式：addEventListener（type，listener【，useCapture】）

type：监听类型：不带on比如：click

listener：事件处理函数

useCapture：可选参数，布尔值

op（获取的元素）.addEventListener（‘click’，function（）{}）

二。删除事件（解绑事件）

删除事件的方式

传统注册方式：op.οnclick=null

方法监听注册方式：

function fn（）{alert（‘kk’）

removeEventListener（‘click’，fn）

}

三。DOM事件流

dom//事件流三个阶段

1.js代码中只能执行捕获或者冒泡其中的一个阶段

2.onclick和attachEvent（ie）只能得到冒泡阶段

3.捕获阶段，如果addEventListener第三个参数为true那么处于捕获阶段document-》html-》body-》fanter-》son（由内到外冒泡阶段，由外到内捕获阶段）

onblur，onfocus，onmouseenter，onmouseleave没有冒泡

捕获事件具体代码展示： 为true时，document-》html-》body-》fanter-》son（执行顺序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom事件流</title>
		<style>
			.father{
				border: 1px solid aqua;
				line-height: 180px;
				text-align: center;
				height: 185px;
				width: 185px;
				background-color: aqua;
			}
			.son{
				text-align: center;
				line-height: 100px;
				margin:40px;
				height: 100px;
				width: 100px;
				background-color: silver;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">son盒子</div>
		</div>
	</body>
	<script>
		var son=document.querySelector('.son');
		son.addEventListener('click',function(){
			alert('son');
		},true);
		var father=document.querySelector('.father');
		father.addEventListener('click',function(){
			alert('father');
		},true);
	</script>
</html>

冒泡事件具体代码展示： 为false时，son->father-》body-》html->document（执行顺序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom事件流</title>
		<style>
			.father{
				border: 1px solid aqua;
				line-height: 180px;
				text-align: center;
				height: 185px;
				width: 185px;
				background-color: aqua;
			}
			.son{
				text-align: center;
				line-height: 100px;
				margin:40px;
				height: 100px;
				width: 100px;
				background-color: silver;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">son盒子</div>
		</div>
	</body>
	<script>
		// var son=document.querySelector('.son');
		// son.addEventListener('click',function(){
		// 	alert('son');
		// },true);
		// var father=document.querySelector('.father');
		// father.addEventListener('click',function(){
		// 	alert('father');
		// },true);
		var son=document.querySelector('.son');
		son.addEventListener('click',function(){
			alert('son');
		},false);
		var father=document.querySelector('.father');
		father.addEventListener('click',function(){
			alert('father');
		},false);
	</script>
</html>

四.事件对象

var div=document.querySelector('.box');
div.οnclick=function(event){

console.log（event）；
}

1.event就是一个事件对象，写在监听函数小括号里面（e，event，ev常写）

2.有了事件才会有事件对象，它是系统自动创建的，不需要我们传递参数

3.事件对象是我们事件的一系列相关数据的集合跟事件相关的比如：鼠标点击里面就包含了鼠标得到相关信息

事件对象常见的属性和方法

e.target //返回触发事件的对象标准

e.srcElement //返回触发事件的对象非标准 ie6-8使用

e.type //返回事件的类型如：click，mouseover，不带on

e.cancelBubble //该属性阻止冒泡非标准 ie6-8使用

e.stopPropagation() //阻止冒泡标准

e.returnValue //该属性阻止默认事件非标准 ie6-8如不让链接跳转

e.preventDefault（） //该方法阻止默认事件标准不让链接跳转

五.事件委托

原理：不是子节点单独设置事件监听器，而是事件监听设置在其父节点上，然后利用冒泡原理影响设置每个子节点

案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，事件冒泡到ul上，ul有注册事件就会触发事件监听器

<script>
			window.onload=function(){
				var ul = document.querySelector('ul');
				ul.addEventListener('click',function(e){
					e.target.style.color="blue";
				},true)
			}

六.常用的鼠标事件（补充）

1.contextmenu // 禁用右键菜单控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
e.preventDefault();//阻止默认行为
})

2.selectstart //禁止鼠标选中

document.addEventListener('selectstart',function(e){
e.preventDefault();//阻止默认行为
})

event对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段我们主要是用鼠标事件对象mouseEvent和键盘事件对象KeyboarEvent

鼠标事件对象：

e.clientX //返回鼠标相对于浏览器窗口可视区的x坐标

e.clientY //返回鼠标相对于浏览器窗口可视区的Y坐标

e.pageX //返回鼠标相对于文档页面的X坐标 ie9+支持

e.pageY //返回鼠标相对于文档页面的Y坐标 ie9+支持

e.screenX //返回鼠标相对于电脑屏幕的X坐标

e.screenY //返回鼠标相对于电脑屏幕的Y坐标

七.图标跟随鼠标案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图标跟随鼠标</title>
		<style>
			img{
				position: absolute;
				height: 50px;
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div class="mouse">
			<img src="img/2.jpeg"/>
		</div>
		<script type="text/javascript">
			var img=document.querySelector('img');
			document.addEventListener('mousemove',function(e){
				var x=e.pageX;
				var y=e.pageY;
				
				img.style.top=y-20+'px';
				img.style.left=x-20+'px';
			})
		</script>
		
	</body>
</html>

八.常用的键盘事件

onkeyup //某个键盘按键被松开时触发，不区分字母大小写

onkeydown//某个键盘按键被按下时触发，不区分字母大小写

onkeypress //某个键盘按键被按下时触发，但它不识别功能按键比如ctrl shift 箭头等，区分字母大小写

e.keyCode可以得到相应按键的ASCII值

案例：按下s健光标定位到搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按下按键光标定位到搜索框</title>
		<style>
			.search{
				background-color: gainsboro;
				height: 100vw;
				width: 1300px;
				margin: 0 auto;
			}
			.search input{
				border:0;
				height: 25px;
				width: 220px;
				margin-top: 20px;
				margin-left: 550px;
				outline: none;/* 点击无边框 */
			}
			.search span{
				display: inline-block;
				height: 25px;
				width: 25px;
				transform: translateY(8.5px);
				background: url('icon/search.png')no-repeat;
				background-size: contain;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="search">
			<input type="search" placeholder="111" /><span></span>
			
		</div>
		<script>
			window.onload=function(){
				var input=document.querySelector('input');
				document.addEventListener('keypress',function(e){
					if(e.keyCode===115){
						input.focus();
					}
				})
				
			}
		</script>
	</body>
</html>

案例：模拟京东快递单号查询（文本框输入内容时，文本框自动显示大字号内容）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟京东大字号内容显示</title>
		<style>
			
			.search{
				margin: 45px;
			}
			.big{
				line-height: 35px;
				height: 35px;
				width: 168px;
				border: 1px solid gray;
				box-shadow: 1px 1px 4px gray;
				display: none;
			}
			input{
				margin-top: 10px;
			}
			 .big::before{
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				top: 82px;
				left: 88px;
				border: 8px solid #000;
				border-style:solid dashed dashed;
				border-color:#fff transparent transparent;
				 
				
			}
		</style>
	</head>
	<body>
		<div class="search">
				<div class="big"></div>
				<input type="text" placeholder="输入快递单号" id="jd">
		</div>
		<script>
			var big=document.querySelector('.big');
			var jd=document.getElementById('jd');
			jd.addEventListener('keyup',function(){
				if(this.value==''){
					big.style.display='none';
				}else{
					big.innerText=this.value;
					big.style.display='block';
				}
				jd.onblur=function(){
					big.style.display='none';
				}
			})
			jd.onfocus=function(){
					big.style.display='block';
			}
		</script>
	</body>
</html>