事件委托

来源：互联网发布：mac下载软件存在哪里编辑：程序博客网时间：2024/05/28 15:50

文章开始之前首先介绍一位大神的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 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。）

0 0