简述事件委托
封装事件委托
要求：写出这样一个函数on(‘click’, ‘#testDiv’, ‘li’, fn)
注意：先搞清楚输入(封装的四个参数，事件绑定、元素选择器 Element.matches 、事件 event 对象，某些函数)在搞清楚输出
当用户点击#testDiv里的li元素时,调用fn函数
要求用到事件委托
答案一
判断target是否匹配’li’等选择器，
<body> <div id="div1"> </div> </body>
setTimeout(()=>{ const button =document.createElement('button') button.textContent = 'click 1' div1.appendChild(button) },1000) //产生一个button,button内容,把button放到div1里面 on('click' , '#div1', 'button',()=>{ console.log('button 被点击了') }) //封装好的事件委托函数 //先搞清楚输入(封装的四个参数，这里分别是事件类型，元素，选择器,回调函数)在搞清楚输出 function on(eventType, element,selector, fn){ if(!(element instanceof Element)){ //如果这个element不是一个Element(元素)，就找 element = document.querySelector(element) } element.addEventListener(eventType,(e)=>{ const t=e.target if(t.matches(selector)){ fn(e) } }) }//matches用来判断一个元素是否满足选择器，matches匹配的意思
答案二
递归判断target / target的爸爸/target的爷爷。(当前元素不匹配button就看他的爸爸匹配不，只要我的祖先中某一项是button，说明点击的就是button)
<body> <div id="div1"> </div> </body>
setTimeout(()=>{ const button =document.createElement('button') button.textContent = 'click 1' div1.appendChild(button) },1000) //产生一个button,button内容,把button放到div1里面 on('click' , '#div1', 'button',()=>{ console.log('button 被点击了') }) function on(eventType, element, selector, fn) { if(!(element instanceof Element)){ element = document.querySelector(element) } element.addEventListener(eventType, e => { let el = e.target //看被操作的元素是否不符合选择器button while (!el.matches(selector)) { if (element === el) { //发现当前元素等于第二个参数div1时，找不到了，不能超过div1 el = null break } el = el.parentNode //符合被操作的元素等于它的爸爸 } el && fn.call(el, e, el) //如果我找了一个爸爸是匹配这个选择器的，就算是成立了，调用fn，传this，第一个参数传e，第二个参数传匹配的元素 }) return element }
整合进自己的jQuery
有兴趣可以自己实现$(’#xxx’).on(‘click’, ‘li’, fn)试试看~
JS支持事件吗
答
不支持。本次讲的DOM事件不属于JS的功能，是浏览器提供的 DOM的功能
JS只是调用了DOM提供的addEventListener而已
优点
1.减少内存消耗（省监听数）
例如：
你要给100个按钮添加点击事件，咋办？
如果给每个按钮添加点击事件，那对于内存消耗是非常大的，效率上需要消耗很多性能；
因此，我们可以监听这100个按钮的父层元素，等冒泡的时候判断target是不是这100个按钮中的一个；
所以事件委托可以减少大量的内存消耗，节约效率。
2.可以监听动态元素
例如：
你要监听目前不存在的元素的点击事件，咋办？
答：监听祖先，等点击的时候看看是不是我想要监听的元素即可。
