共计 2668 个字符，预计需要花费 7 分钟才能阅读完成。
一、名称解释 1、事件事件是文档或者浏览器窗口中产生的，特定的交互霎时。事件是用户或浏览器本身执行的某种动作，如 click,load 和 mouseover 等事件。事件是 javaScript 和 DOM 之间交互的桥梁。2、事件流事件产生时会在元素节点与根节点之间依照特定的程序流传，门路所通过的所有节点都会收到该事件，这个流传过程即 DOM 事件流。事件流包含三个阶段：事件捕捉阶段、处于指标阶段、事件冒泡阶段 3、事件流模型事件流传的程序对应浏览器的两种事件流模型：捕捉型事件流和冒泡型事件流。冒泡型事件流：事件的流传是从最特定的事件指标到最不特定的事件指标。即从 DOM 树的叶子到根。捕捉型事件流：事件的流传是从最不特定的事件指标到最特定的事件指标。即从 DOM 树的根到叶子。
ps. 事件捕捉阶段：理论指标（<div>）在捕捉阶段不会接管事件。也就是在捕捉阶段，事件从 document 到 <html> 再到 <body> 就进行了。上图中为 1~3. 处于指标阶段：事件在 <div> 上产生并解决。然而事件处理会被看成是冒泡阶段的一部分。冒泡阶段：事件又流传回文档。二、事件冒泡 vs 事件捕捉事件冒泡 和 事件捕捉 别离由 微软 和 网景 公司提出，起初 W3C 将两者联合，制订了对立的规范 —— 先捕捉再冒泡。在 JavaScript 中，addEventListener 办法用于向指定元素增加事件句柄。语法：element.addEventListener(event, function, useCapture)
1、事件冒泡来看一段代码实例，思考运行后会打印出什么。
依据冒泡事件流模型由外向外的规定，会顺次弹出：click div -> click body -> click html -> click docuement2、事件捕捉将上一段代码中的 false 都改为 ture，则变为捕捉形式：
依据捕捉事件流模型由内向内的规定，会顺次弹出：click document -> click html -> click body -> click div3、事件冒泡 & 事件捕捉同时存在如果两种事件流模型同时存在会怎么展现呢？
准则：a. 从外向内，捕捉后退，遇到捕捉事件立刻执行 b. 非 target 节点，先捕捉再冒泡 c.target 节点，按代码书写程序执行（无论冒泡还是捕捉）因而会顺次弹出：click document -> click html -> click div -> click body4、阻止冒泡的办法 —-event.stopPropagation() 办法 这是阻止事件的冒泡办法，不让事件向 document 上蔓延，然而默认事件依然会执行，当你调用这个办法的时候，如果点击一个连贯，这个连贯依然会被关上。5、阻止默认事件的办法 —event.preventDefault() 办法这是阻止默认事件的办法，调用此办法是，连贯不会被关上，然而会产生冒泡，冒泡会传递到上一层的父元素。举个栗子：看图谈话，在上面的空白处，无论我怎么点击右键，无论在什么地位点击，都会呈现默认框。
如果咱们不想要这种默认的框怎么办呢？
6、return false 这个办法比拟暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，链接不会被关上，事件也不会传递到上一层的父元素；能够了解为 return false 就等于同时调用了 event.stopPropagation() 和 event.preventDefault() 三、事件委托 1. 什么是事件委托？事件委托又名事件代理，JavaScript 高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够治理某一类型的所有事件。举个栗子：班级收作业收作业有两种办法：一是谁写完了本人去交个老师。二是写完了对立交给班长，让班长交给老师，事实当中，咱们大都采纳第二种办法。这就能够了解为委托，无论是谁交给老师，目标只有一个就是作业可能失常上交。2. 为什么要用委托？一般来说，dom 须要有事件处理程序，咱们都会间接给它设事件处理程序就好了，那如果是很多的 dom 须要增加事件处理呢？比方咱们有 100 个 li，每个 li 都有雷同的 click 点击事件，可能咱们会用 for 循环的办法，来遍历所有的 li，而后给它们增加事件，那这么做会存在什么影响呢？在 JavaScript 中，增加到页面上的事件处理程序数量将间接关系到页面的整体运行性能，因为须要一直的与 dom 节点进行交互，拜访 dom 的次数越多，引起浏览器重绘与重排的次数也就越多，就会缩短整个页面的交互就绪工夫，这就是为什么性能优化的次要思维之一就是缩小 DOM 操作的起因；如果要用事件委托，就会将所有的操作放到 js 程序外面，与 dom 的操作就只须要交互一次，这样就能大大的缩小与 dom 的交互次数，进步性能；每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，天然性能就越差了。比方下面的 100 个 li，就要占用 100 个内存空间，如果是 1000 个，10000 个呢，如果用事件委托，那么咱们就能够只对它的父级（如果只有一个父级）这一个对象进行操作，这样咱们就须要一个内存空间就够了，是不是省了很多，天然性能就会更好。3. 事件委托原理事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，而后逐渐向上流传事件，举个栗子：页面上有这么一个节点树，div>ul>li>a; 比方给最外面的 a 加一个 click 点击事件，那么这个事件就会一层一层的往外执行，执行程序 a >li>ul>div，有这样一个机制，那么咱们给最里面的 div 加点击事件，那么外面的 ul，li，a 做点击事件的时候，都会冒泡到最外层的 div 上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。4. 事件委托怎么实现？
当用事件委托的时候，基本就不须要去遍历元素的子节点，只须要给父级元素增加事件就好了，其余的都是在 js 外面的执行，这样能够大大的缩小 dom 操作。5. 总结那什么样的事件能够用事件委托，什么样的事件不能够用呢？适宜用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。值得注意的是，mouseover 和 mouseout 尽管也有事件冒泡，然而解决它们的时候须要特地的留神，因为须要常常计算它们的地位，解决起来不太容易。不适宜的就有很多了，举个例子，mousemove，每次都要计算它的地位，十分不好把控，在不如说 focus，blur 之类的，自身就没用冒泡的个性，天然就不能用事件委托了。