js 事件监听与事件委托

最新推荐文章于 2024-03-07 09:46:24 发布

原创最新推荐文章于 2024-03-07 09:46:24 发布 · 481 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #css #html

事件监听与普通事件的区别

1.添加事件监听可以对动态生成的元素（未来元素生效），二普通事件不可以
2.普通事件只能执行一个回调函数，监听时间可以添加几个（可以绑定多个相同的事件）
3.家庭可以改变事件的传播方式冒泡或捕捉，而事件绑定只有捕捉
4.在删除事件上，，事件监听有删除方法，而普通事件监听只能通过设为null删除

事件委托是什么，以及优点

事件委托：就是利用事件冒泡机制，指定一个事件的处理程序，来管理某一类型的所有事件，即利用事件冒泡原理，把事件添加到父级上，触发执行效果。
优点：只在内存中开辟了一开内存空间，节省资源减少DOM操作，提高性能，对于新添加的元素也会有之前的事件（可以把事件绑定给未来元素）

事件监听的方法

addEventListener() removeEventListener();
他们都有三个参数：
参数一：事件名
参数二：事件处理的程序
参数三：如果是true表示在捕获阶段 false则是在冒泡阶段
addEventListener()：可以为程序添加多个事件的处理程序，触发时会按照添加程序依次调用。
removeEventListener()：不能移除匿名添加的函数。
使用条件：
1.相同元素
2.相同的事件名
3.相同的函数名（匿名函数不行，需要全局函数）
4.相同的执行阶段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li class="lis1"></li>
			<li class="lis2"></li>
			<li class="lis3"></li>
			<li class="lis4"></li>
			<li class="lis5"></li>
		</ul>
		<script>
			var ul=document.getElementsByTagName("ul")[0];
			
			ul.addEventListener("click",function(event){
			
				//给多个元素绑定相同的功能
				//var s=event.target 
				//var s=event.target.id   //绑定id
				var s=event.target.tagName     //绑定给标签名
				  
				var s=event.target.className;//绑定class
				
				
				 if(s.toLowerCase()=="li"){  //绑定的标签名
				 	console.log("li li");				 
				 }
				
				if(s=="lis1"){  //class
					console.log(1);
				}
				if(s=="lis2"){
					console.log(2);
				}
				if(s=="lis2"){
					console.log(2);
				}
				if(s=="lis2"){
					console.log(2);
				}
			})

		
		</script>
	
	</body>
</html>