事件监听、事件委托

最新推荐文章于 2022-10-01 15:33:48 发布

浅巷长歌999

最新推荐文章于 2022-10-01 15:33:48 发布

阅读量502

点赞数

分类专栏： JavaScript 文章标签：事件监听事件冒泡事件委托 JavaScript 性能优化

本文链接：https://blog.csdn.net/qq_42401946/article/details/111978086

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、事件监听
1、可以根据事件监听实现捕获或冒泡现象
2、可以为同一个元素添加多次同样的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			height: 1000px;
		}
	</style>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*window.addEventListener("click",function(){
		alert( "window被点击了" );
	},true)
	document.addEventListener("click",function(){
		alert( "document被点击了" );
	},true)
	document.body.addEventListener("click",function(){
		alert( "body被点击了" );
	},true)*/
	
	//可以为同一个元素添加多次同样事件
	/*document.onclick = function(){
		alert(1);
	}
	document.onclick = function(){
		alert(2);
	}*/
	//document.onclick = null;//事件取消
	
	document.addEventListener("click",clickHandler);
	
	function clickHandler(){
		alert( "document被点击了111" );
	}
	
	//取消单击事件
	document.removeEventListener("click",clickHandler);
</script>

二、事件委托
委托：让别人来完成

事件委托：当为多个同类的标签添加同一个事件时，为了提高程序的执行效率，可以将事件添加到这些标签的父级标签上，这里的父级可以是上一级，上上一级等

事件委托的好处：
提高程序的执行效率
动态创建的元素添加事件时可以使用事件委托实现，防止事件添加时动态创建的元素查找不到

总结事件委托好处：
减少了事件绑定浏览器重绘的次数,提高了程序的执行效率;
减少事件的冗余绑定，节约了事件资源。
可以解决动态添加的元素节点无法绑定事件的问题;

事件委托的实现：
获取事件源 target || srcElement
明确事件源可以根据标签名类名属性名明确

事件委托的实现是事件冒泡的机制，不能冒泡的事件也就不能实现委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul>
				<li>兄弟多个1</li>
				<li>兄弟多个2</li>
				<li class="a" f = "aa">兄弟多个3</li>
				<li f = "aa">兄弟多个4</li>
				<li f = "aa">兄弟多个5</li>
				<li class="a">兄弟多个6</li>
				<li>兄弟多个7</li>
				<li class="a">兄弟多个8</li>
				<p f = "aa">兄弟多个8</p>
				<p>兄弟多个8</p>
				<p>兄弟多个8</p>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	//为多个li添加单击事件
	//传统方式：
	/*var list = document.getElementsByTagName("li");
	for( var i = 0 ; i < list.length ; i++ ){
		list[i].addEventListener("click",clickHandler);
	}
	function clickHandler(){
		alert();
	}*/
	//使用事件委托
	var oUl = document.querySelector("ul");
	oUl.onclick = function(e){
		var e = e || event;
		//获取事件源
		var target = e.target || e.srcElement;
		//明确事件源  根据标签名
		/*if( target.tagName.toLowerCase() == "li" ){
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}*/
		
		//明确事件源  根据类名
		/*if( target.className == "a" ){
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}*/
		
		//明确事件源  根据类名
		if( target.getAttribute("f") == "aa" ){
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}
	}
</script>

三、兼容写法

//获取页面滚走的距离
var sTop = document.documentElement.scrollTop || document.body.scrollTop;

//事件对象创建  兼容
var e = e || event;

//键盘事件
var e = e || event;
var code = e.keyCode || e.which;

//冒泡事件
e.stopPropagation ? e.stopPropagation () : e.cancelBubble = true;

//事件委托
var e = e || event;
var target = e.target || e.srcElement;