開發(fā)過程中經(jīng)常要給DOM元素添加一些事件，下面介紹幾種方式：
先寫幾個好看的button
//引入JQuery<script type="text/javascript" src="jquery-1.8.3.min.js"></script><span id="tips"></span><input type="button" id="btn1" value="OK1" onclick="alert('hello btn1');"><input type="button" id="btn2" value="OK2" click-type="listener"><input type="button" id="btn3" value="OK3" click-type="listener"><input type="button" id="btn4" value="OK4"><input type="button" id="btn5" value="OK5"><div id="btn-list"><input type="button" id="btn6" value="OK6"><input type="button" id="btn7" value="OK7"></div>效果如下：
1、直接在btn1使用onclick，這種方式稱為內(nèi)聯(lián)事件，簡單粗暴，好處是可以清晰地看到button綁定了click事件；這種方式等同于：(element).onclick；
這種方式的缺點，一個元素只能指定一個內(nèi)聯(lián)事件，添加了這段代碼之后會發(fā)現(xiàn)onclick="alert('hello btn1');"被覆蓋了：
(function(){ var _btn1 = document.getElementById('btn1'), _tips = document.getElementById('tips'); _btn1.onclick=function(){ _tips.innerHTML='hello world~'; }; })();2、使用原生JS給多個元素綁定事件，在 IE 9 之前的版本中，需要使用 attachEvent替代addEventListener
(function(){ var _btns=document.querySelectorAll("[click-type=listener]"), i = 0, len = _btns.length; for (i; i < len; ++i) { var _btn=_btns[i]; _btn.addEventListener("click", function (evt) { var target = evt.target alert('hello '+target.id); }); } })();3、第二種方式邏輯比較簡單，逼格會高一點，但是代碼量比較多，而且還需要考慮IE的兼容性問題，由于我們的項目一般都會使用到JQuery，所以就可以這樣寫了：
$("#btn4").click(function(){ alert("hello btn4");}); $("#btn5").on("click",function(){ alert("hello btn5");});上面使用到的on和bind方法效果是一樣的；
4、使用on，給多個元素綁定一個或多個事件：
$("#btn-list").on("click","input",function(evt){ alert("hello "+ evt.target.id);});這是我現(xiàn)在在開發(fā)中最常用的一種方法，有個好處，舉個栗子：
/*動態(tài)添加幾個button*/(function(){ for(var i=8;i<10;i++){ $("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'>"); }})();這樣動態(tài)添加元素的時候可以自動添加click事件，比如我們經(jīng)常使用AJAX加載一些數(shù)據(jù)動態(tài)添加到頁面上，這樣就簡單多了。
另外：使用原生JS利用事件委托實現(xiàn)也比較簡單，
<ul id='list'> <li>css</li> <li>js</li> <li>html</li></ul>(function(){ var a=document.getElementById('list'); a.addEventListener('click',function(e){ var b = e.target; alert(b.innerHTML); },false);})();新聞熱點
疑難解答
