js代理监听动态添加元素事件(类似jquery的delegate事件)

很多时候我们需要监听动态添加的元素事件。

举个例子：

页面中有一个div，div中有一个button以及一个table，我们需要在点击button的时候相应的table行进行排序,而根据特定需求ajax返回数据中的table值是变化的，

table变化导致了原先的button必须被移除掉，然后在对应业务地方再添加上一个对table进行排序功能的button。换句话说 这个button的功能是不变的，但是这个button是不停的被替换的。

如果我们用传统的dom事件处理，button.on('click',fn),或者button.addEventListener('click',fn,false)只能对当前的button产生作用，一旦该button被替换掉，

即使再生成的button的id跟之前属性一个样，也不会触发这个事件。毕竟已经不是之前那个button了，对应的事件也就不会触发了。

有几种解决办法：

一：添加button后给button继续绑定事件：

    即页面由于某种操作导致原先button被移除掉，在生成新的button时候给该button每次都重新绑定上一个事件，

    例如：生成新button后将button加入文档中后加上：document.getElementById('button').οnclick=function(e){fn}

    利用这种方式可以很直观的解决对新建元素的绑定事件，从而也达到了我们对动态生成元素绑定事件一说;

    不过这种方式有个致命缺点：即每次绑定一个事件在卸载这个元素时候，该元素对应的事件没有被消除，即使元素被消除了，其对应的事件没有被删除掉，因为dom1级事件是无法消除掉的，也就是导致了内存不停的增加。

    不过如果换做addEventListener方式去监听，也可以利用removeEventListener去移除掉事件绑定;

    但是在每次生成新元素时候都需要动态的去绑定事件，这点对于模块化开发还是不是那么方便，毕竟一个项目不能是一个人写的代码，如果修改还是要污染源代码的，且维护也不是那么方便

二：jquery中的live或者delegate事件：

    jquery中的事件处理可以说已经做得很好了&