原生js未来元素事件监听的写法

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”， 如鼠标单击事件 click ，鼠标双击事件 doubleclick ， 鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false  。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

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

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

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

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

这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。

例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

    
    
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
    alert("又是一个警告框");
}