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.綁定事件監(jiān)聽函數

addEventListener()是標準的綁定事件監(jiān)聽函數的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持；但是，IE8.0及其以下版本不支持，它使用attachEvent()來綁定事件監(jiān)聽函數。所以，必須處理一下兼容性問題。

// 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')
}