事件委托

最新推荐文章于 2024-07-15 00:20:44 发布

王可夫

最新推荐文章于 2024-07-15 00:20:44 发布

阅读量1.6k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u012441139/article/details/54139407

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章开始之前首先介绍一位大神的github地址：

https://github.com/EleanorMao/FlexoCalendar.js

这是一个日期的插件，很好用，感谢大神的分享！

本次讲到事件委托，是因为今天要写一个选择以周为时间段的功能，如下图所示，然后我要点击第几周然后获取后面的时间段。开始是可以的，但是当我切换月份后就获取不到了，因为这位大神写的时间是动态生成的，新添加的元素不会绑定事件，所以需要每次添加新元素时同时添加绑定事件。这显然不科学。于是我就想到了事件委托可以派上用场了，因为事件委托可以为动态生成的元素赋予点击事件。

首先看看我在网上找到的别人总计的js中事件传播过程：

事件的处理流成分为三阶段：

　　　　一、事件捕获阶段：当某个元素触发某个事件时，首先会触发根元素document，然后事件将沿着dom树向下传播给目标节点的每一个祖先节点，直到目标节点。

　　　　二、目标阶段：到达目标元素之后，执行目标元素的事件处理函数

　　　　三、事件冒泡阶段：从目标元素开时，事件将沿着DOM树向上传播，直到根节点。

事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。

结合代码分析：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FlexoCalendar</title>
	<link rel="stylesheet" href="FlexoCalendar.css">
	<script src="jq.js"></script>
	<script src="FlexoCalendar.js"></script>
</head>
<body style="background:#f5f5f5;">
	<!-- <div class="calendar-wrapper">
		<div id="calendar"></div>
	</div> -->
	<div class="calendar-wrapper">
		<div id="calendar-weekly"></div>
	</div>
	<!-- <div class="calendar-wrapper">
		<div id="calendar-monthly"></div>
	</div> -->
	
	
	<script>
		$("#calendar").flexoCalendar({setYear:2017,setMonth:1, selectDate: 'each-each-each'});
		$("#calendar-weekly").flexoCalendar({type:'weekly',today:false});
		$("#calendar-monthly").flexoCalendar({
			type: 'monthly',
			onselect: function(date){
				console.log(date)
			}
		});
		
		var calendars =  document.getElementById("calendar-weekly");
		calendars.addEventListener("click",function(e){
			var e = e||window.event;
			//e.srcElement 是IE特有的
			//e.target 是dom标准
			var target = e.target || e.srcElement;
			//alert(target.innerHTML);
			if(target.className == "process"){
				console.log(target.innerHTML)
			}else if(target.className == "week"){
				console.log(target.nextSibling.innerHTML)
			}
		})

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

此代码是在上面github里面下载后再自己加上事件委托的。可以看到，我们不是给生成的span 或者 tr td 绑定点击事件，而是给他们的祖先div绑定点击事件，然后通过e.target判断当前点击的是哪个节点，输出其内或者其下一个元素内的内容（nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。）