动态为元素绑定事件

对于在页面加载时就被加载的元素，我们可以直接使用下面代码来为元素绑定事件

elementObject.onXXX = function(){}

但是对于页面动态新增的元素，是没有被绑定事件的，那么我们如何为这些新增元素绑定事件呢？

1.通过addEventListener在新元素被添加时为其绑定事件(不支持IE8及以下)

elementObject.addEventListener(eventName,handle,useCapture)

eventName是要绑定的事件，如click,change， handle是句柄，可以是myFunction()，也可以是匿名函数，直接写function(){}，useCapture是

参数	说明
elementObject	DOM对象（即DOM元素）
eventName	绑定的事件，如click,change，不需要on
handle	句柄，即用来处理事件的函数。可以是函数名myFunction，也可以是匿名函数，直接写function(){}
useCapture	Boolean类型，是否使用捕获，一般用false 。
兼容性	addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

*注意：事件句柄函数是指“ 函数名 ”，不能带小括号。

2.通过attachEvent在新元素被添加时为其绑定事件(支持IE)

element.Object.attachEvent(eventName,handle)

参数	说明
elementObject	DOM对象（即DOM元素）
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

所以如果要兼容IE8及以下浏览器，则可以使用这样的方法

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false)
  }catch(e){
     // IE8.0及其以下版本
    try{
       obj.attachEvent('on' + type,handle);
    }catch{

    }
  }
}