javascript 事件绑定方式

1.在DOM元素中直接绑定

// html
<div onClick="showAlert()"></div>

// js
function showAlert(){
  alert('Hello')
}

2.在JavaScript代码中绑定

// html
<div id="demo"></div>

// js
document.getElementById("demo").onclick = function(){
  alert('Hello')
}

3.绑定事件监听函数

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

// html
<div id="demo"></div>

// js
addEvent(document.getElementById("demo"),"click",showAlert);

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

function showAlert(){
  alert('Hello')
}