关于面试中的原生js实现事件代理和事件模型和事件广播的学习

这也是看了网上一篇面试题所以想整理下，顺便对自己学习过的东西重新理解巩固下

在看事件代理之前，我们先来重温下事件，在与浏览器进行交互的时候浏览器会触发各种事件，比如当我们打开某一个网页的时候，浏览器加载完成了这个网页，就会触发一个load事件，当我们点击页面中的某一个地方，浏览器就会在那个地方触发一个click事件，这样我们可以编写js，通过监听某一事件，来实现某些功能扩展，例如监听load事件，显示欢迎信息，那么当浏览器加载完一个网页之后，就会显示欢迎信息。

现在我们再来说下js事件的三阶段，分别为捕获，目标，冒泡，什么意思呢？先举个例子（虽然盗图可耻，但是这张图真的简单明了）

比如说我现在点击一个button

问题来了，我明明只是点击了button，那其余的这些是什么？这就是我们前面提到的三个阶段：

捕获阶段：从最上层元素，知道最下层，你点击的那个target元素，路过的所有节点都可以捕捉到这事件

         目标阶段：如果给事件成功的到达了target元素，它会进行事件处理

        冒泡阶段：事件从最下层向上传递，依次出发父元素的该事件处理函数

而这里为什么先是父节点捕获了然后往下然后又回到父节点呢？

这就源于之前的浏览器大战，我们都知道现在的浏览器有几大巨头，而IE在曾经是绝对的老大，于是IE觉得事件触发就应该是从下层向上传递，就类似冒泡那种，

但是另一种浏览器不这么认为，它觉得事件捕获应该是父节点先触发，最后才是目标节点触发，当打的不可开交的时候，DOM2站出来了。为了世界的和平，

于是DOM2级事件规定事件流有三个阶段：分别是捕获，目标，冒泡（注：IE8以及更早版本不支持DOM事件流）。就是如上图所示，走一个来回。然后根据我们需求，规定我们的事件监听是在捕获阶段还是冒泡阶段。

事件监听

上面提到事件监听，那我们再来说下事件监听的几种方法吧（会的童鞋可以自动略过这一节。。。）

1.在html中直接写

<button οnclick="alert('你点击了这个按钮');">点击这个按钮</button>

这种很明显缺点是代码耦合，不便于维护和开发

2.DOM绑定

var element=document.getElementById('jianting');
element.onclick = function(event){
    alert('你点击了这个按钮');
};

这种比较常见，比较简单易懂，而且兼容性较好，但是也有缺陷，只能实现一个绑定，也就是说我们再为element绑定第二个click事件时候，会覆盖掉之前的click事件

3.使用事件监听函数

标准的事件监听函数如下：

element.addEventListener(<event-name>, <callback>, <use-capture>);

表示在element这个对象上面添加一个事件监听器，当监听到有<event-name>（如click）事件发生时候，调用callba