事件委托的优点：省监听数（内存）可以监听动态元素什么是事件比如鼠标点击事件 click，右键点击 contextmenu。键盘事件按下任意键 keydown 等概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。这里其实还有2层意思的：第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

为什么要用事件委托：一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。事件委托的原理：

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件

ul id="ul1">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
</ul>

// 事件点击li 弹出 123
window.onload = function(){
  var oUl = document.getElementById("ul1");
  var aLi = oUl.getElementsByTagName('li');
  for(var i=0;i<aLi.length;i++){
      aLi[i].onclick = function(){
          alert(123);
      }
  }
}
// 上面代码的意思是 先找到ul 然后遍历 li，点击li的时候又要找一次目标的位置才能执行最后的操作，每次点击都要找到li

我们用事件委托怎么做呢

监听 button 的爸爸，等冒泡的时候判断 target 是不是这个按钮

<div>
 <button></button>
</div>


div.addEventListener('click', (e)=>{
  const t = e.target
  if(t.tahName.toLowerCase() === 'button'){
    console.log('button 被点击了')
  }
})

封装事件委托

写个函数 on('clcik', '#div', 'button', fn) 当用户点击 div里面的button 元素就调用 fn 要求用到事件委托

function on(eventType, element, selector, fn){
 if(element instanceof Element){
   element = document.querySelector(element)
 }
 element.addEventListener(eventType, (e)=>{
   const t = e.target
   if(t.matches(selector){
     fn(e)
   }) 
 })
}

怎么阻止冒泡呢

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如：

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

上面的代码，Demo如下,我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

阻止冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();

阻止默认动作

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

我们都知道，链接的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转：

  //假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
	var a = document.getElementById("testA");
	a.onclick =function(e){
		if(e.preventDefault){
			e.preventDefault();
		}else{
		window.event.returnValue == false;
		}
	}

什么是事件委托？以及阻止默认事件和阻止事件冒泡

我们用事件委托怎么做呢

封装 事件委托

怎么阻止冒泡呢

阻止冒泡

阻止默认动作

封装事件委托