ITPUB老博客搬遷至此
html元素事件綁定共兩種方式：
（1）行內(nèi)式：
<--input type="”button”" data-ke-onclick="”alert(‘haha!’);”/">
注意：原來事件處理過程可以相當(dāng)于一個函數(shù)的執(zhí)行語句；
--?<--input type="button" ???data-ke-onclick="
? ? ? ? ?alert('luozhixiao');
? ? ? ? ?var arr2 = [['luozhixiao',22,'huazhou'],['limeisheng',44,'meizhou']];
? ? ? ? ?for(var i in arr2){
? ? ? ? ? ? for(var j in arr2[i]){
? ? ? ? ? ? ? ?console.log(arr2[i][j]);
? ? ? ? ? ? }
? ? ? ? ?}
? ? ? ? ? "/>
（2）動態(tài)綁定：（目前做項目最流行的方式：元素、樣式讼呢、事件分離缩擂，解耦３视睢５骋Ｊ鑫怼）
?????????????????? function myAlert(){
??????????????????????????? alert("dianjile");
?????????????????? }
?????????????????? document.getElementById("btn1").onclick = myAlert;
原理注意：
這種其實(shí)是：對象obj的屬性onclick被賦值了：
Obj . onclick =myAlert?;?? //即：?Obj . onclick();
即瀏覽器監(jiān)聽這個html元素上的事件胆建，一旦發(fā)生“點(diǎn)擊”烤低，則執(zhí)行onclick();
不要寫成了：document.getElementById("btn1").onclick =myAlert();這樣加了括號的話，變成了瀏覽器執(zhí)行到這一行時笆载，先執(zhí)行myAlert()扑馁，然后將此函數(shù)的返回值賦給onclick事件。
當(dāng)然如果真的遇上奇葩需求凉驻，可以象下面這樣：
? ? ? ? ? ? ? ? ? ?var i = 0;
? ? ? ? ? ? ? ? ??function myAlert(){//根據(jù)條件判斷應(yīng)該返回哪個函數(shù)
? ? ? ? ? ? ? ? ? ?if(i == 0){
? ? ? ? ? ? ? ? ? ? ? ?return??function(){alert(“條件不足腻要，無法登錄！”) ; } ;
? ? ?? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ? ?return??function(){alert(“條件充足涝登，請登錄雄家！”) ; } ;
? ?? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? document.getElementById("btn1").onclick =myAlert();這樣的話，myAlert()執(zhí)行后返回值就為一個函數(shù)胀滚。
（3）添加事件監(jiān)聽：當(dāng)同一個html元素的同一個事件需要添加多個函數(shù)時使用趟济。
? ? ? ? ? ? ?兼容性注意：
? ? ? ? ? ? ?基于IE內(nèi)核的瀏覽器：attachEvent(eventName , callback);僅僅支持冒泡模型
? ? ? ? ? ? ? 基于W3C標(biāo)準(zhǔn)的瀏覽器：addEventListener(eventName , callback,capture);
? ? ? ? ? 當(dāng)capture ==false , 默認(rèn)值：冒泡模型；
? 當(dāng)capture == true , 捕捉模型咽笼；
? ? ? ? ? ? ? ? 注意：低版本的IE內(nèi)核瀏覽器不支持addEventListener僅支持attachEvent顷编，而且只支持冒泡模型，而且先綁定的function后執(zhí)行（即倒序執(zhí)行）褐荷，事件名稱需要“on”前綴勾效。所以編程時要注意兼容性的問題。
? ? ? ? (1)document.getElementById("btn1").attachEvent("onclick",fn1); //冒泡模型
????????? ? ? ? ? ? ? ?document.getElementById("btn1").attachEvent("onclick",fn2); //冒泡模型
? ? ? ? ? ? ? ? ? ? ? ?//倒序執(zhí)行：先執(zhí)行fn2,再執(zhí)行fn1
?????????? ? ? ? ? (2)document.getElementById("btn1").addEventListener("click",fn1,false);//冒泡模型
????????? ? ? ? ? ? ? ?document.getElementById("btn1").addEventListener("click",fn2,true);//監(jiān)聽模型
? ? ? ? ? ? ? ? ? ? ? ?//正序執(zhí)行叛甫。（還是這樣比較符合我們?nèi)祟惖乃季S吧２愎）
? ? ? ? ? ? ? 然而仗哨，為了解決兼容性問題热凹，我們可以這樣：
? ? ? ? ? ? ? ? ? ? ? ?事件監(jiān)聽時的兼容性問題統(tǒng)一解決方案：jquery源碼實(shí)現(xiàn)也是如此挟纱。
???????? ? ? ? ? ? ? ? ? ? ? ? ?function addEvent(obj , type , eventName){
?????????????????? ? ? ? ? ? ? ? ? ? ? ?? if(window.attachEvent){//如果是基于IE
???????????????????? ? ? ? ? ? ? ? ? ? ? ????????? obj.attachEvent("on"+type,eventName);
?????????????? ? ? ? ? ? ? ? ? ? ? ?????? }else{//如果是基于W3C
??????????????? ? ? ? ? ? ? ? ? ? ? ?????????????? obj.addEventListener(type,eventName);
?????????????????? ? ? ? ? ? ? ? ? ? ? ? ?}
????? ? ? ? ? ? ? ? ? ? ? ????? }
???????? ? ? ? ? ? ? ? ? ? ? ? ?function fn1(){alert("fn1執(zhí)行...");}
???????? ? ? ? ? ? ? ? ? ? ? ? ?function fn2(){alert("fn2執(zhí)行...");}???
???????? ? ? ? ? ? ? ? ? ? ? ? ?addEvent(document.getElementById("btn1"),"click","fn1");
???????? ? ? ? ? ? ? ? ? ? ? ? ?addEvent(document.getElementById("btn1"),"click","fn2");
