关于JS事件的学习总结

最新推荐文章于 2024-04-25 20:29:33 发布

原创最新推荐文章于 2024-04-25 20:29:33 发布 · 337 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS学习总结

前端基础学习笔记同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript学习笔记

2 篇文章

订阅专栏

鼠标事件

onclick 元素被点击时发生

onmousedown 鼠标按键被按下时发生

onmouseup 鼠标按键被松开时发生

oncontextmenu 用户右击鼠标时触发并打开上下文菜单

ondblclick 对象被双击时发生

键盘事件

onkeydown 用户按下一个键盘按键时发生

onkeypress 按下按键时触发

onkeyup 用户释放键盘按钮时

添加事件的三种方式

1、通过html添加事件

2、通过DOM0级方式添加事件

var btn=;

btn.onclick=function(){};

</script>

此方式添加事件的缺点是当添加同一个事件时，后写的会覆盖先写的。

清除事件时，只需让事件指向null。

3、通过DOM2级方式添加事件

document.addEventListener("click",function(){},true);

事件监听主要接受3个参数（事件类型，事件需要执行的函数，是否冒泡）

添加的相同事件不会覆盖前面的事件。

事件类型前面没有"on"。

最后一个参数为true代表捕获，false代表冒泡。

事件流（事件触发的时序问题）

1.事件冒泡：事件从事件源逐级向上传递（自下而上）

一般的事件绑定方式都是事件冒泡

html & js

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>event</title>
</head>
<body>
	<div onclick="alert('1');" >
		<p onclick="alert('2');">
			<span onclick="alert('3');">span 3</span>
			p 2
		</p>
		div 1
	</div>
</body>
</html>

css

<style>
body{
	margin:100px;
	padding:0;
}
div{
	background-color:red;
	width:200px;
	height:200px;
	}
p{
	width:100px;
	height:100px;
	background-color:blue;
}
span{
	display:block;
	width:50px;
	height:50px;
	background-color:yellow;
}
</style>

鼠标点击红色区域，弹出“1”；点击蓝色区域，相继弹出“2”“1”；点击黄色区域，相继弹出“3”“2”“1”。

2.事件捕获（自上而下）

document.addEventLisenter("click",function(){},true);

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>event</title>
</head>
<body>
	<div>		
		<p>
			<span>span 3</span>
			p 2
		</p>
		div 1
	</div>
	<script type="text/javascript">
		var div=document.getElementsByTagName('div')[0];
		var p=div.getElementsByTagName('p')[0];
		var span=p.getElementsByTagName('span')[0];
		var div1=document.getElementsByTagName('div')[1];
		div.addEventListener("click",alert('1'),true);
		p.addEventListener("click",alert('2'),true);
		span.addEventListener("click",alert('3'),true);
	</script>
</body>
</html>

样式同上。页面刷新时依次弹出1，2，3。

但是让我疑惑的是。

可是为什么页面刷新后再点击这些区域不会再触发事件，即添加的click事件只会在页面加载时触发一次，为什么会出现这种情况呢？

3.事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果

好处： 1.批量处理元素事件添加，提高性能

2.新添加的元素也会有之前的事件

html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>event</title>
</head>
<body>
	<ul>
		<li>li-0</li>
		<li>li-1</li>
		<li>li-2</li>
		<li>li-3</li>
		<li>li-4</li>
		<li>li-5</li>
	</ul>
	<input type="button" value="添加li" name="">
</body>
</html>

css

<style>
body{
	margin:100px;
	padding:0;
}
ul{
	width:300px;
}
li{
	list-style-type: none;
	border: 1px solid black;
	margin-bottom:1px;
	background-color: yellow;
}
input{
	margin-left:130px;
}
</style>

	<script type="text/javascript">
		var ul=document.getElementsByTagName('ul')[0];
		var li=ul.getElementsByTagName('li');
		var input=document.getElementsByTagName('input')[0];
		for(var i=0;i<li.length;i++){
			input.onclick=function(){
				var newli=document.createElement("li");
				newli.innerHTML="newli";
				ul.appendChild(newli);
			}
			li[i].onmouseover=function() {
				this.style.background="white";
			}
			li[i].onmouseout=function() {
				this.style.background="yellow";
			}
		}
	</script>

鼠标移入任意 li，其背景变为白色；鼠标移出时变回黄色。且通过点击按钮新添加的 li 没有这些事件。

应用了事件委托的JS代码

事件源：event对象，不管在哪个事件中，你操作的那个元素就是事件源

ie：window.event.srcElement

标准下：event.target

nodename：找到元素的标签名

<script type="text/javascript">
		var ul=document.getElementsByTagName('ul')[0];
		var li=ul.getElementsByTagName('li');
		var input=document.getElementsByTagName('input')[0];
			input.onclick=function(){
				var newli=document.createElement("li");
				newli.innerHTML="newli";
				ul.appendChild(newli);
			}
			ul.onmouseover=function(ev) {
				var ev=ev;
				var target=ev.target;
				if(target.nodeName.toLowerCase()=="li"){
				target.style.background="white";}
			}
			ul.onmouseout=function(ev) {
				var ev=ev;
				var target=ev.target;
				if(target.nodeName.toLowerCase()=="li"){
				target.style.background="yellow";}
			}
	</script>

html,css效果同上。

从中体现了事件委托的两个优点：

1.批量处理元素事件添加，提高性能； 2.新添加的元素也会有之前的事件。