-
HTML事件缺點(diǎn)：JS代碼和HTML代碼都需要更改。
查看全部 -
使用事件處理程序
1.HTML事件：
查看全部 -
事件捕獲：
查看全部 -
事件冒泡：
查看全部 -
事件流：
查看全部 -
事件：
查看全部 -
DOM0 btn.onclick = function() {}
DOM2 btn.addEventListener("click", function,false)????(非IE)
attachEvent("onclick", function) (IE)
查看全部 -
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <style> .ee{text-decoration:line-through;?text-decoration:underline;?} </style> </head> <body> <div?id="First"> <input?type="button"?id="btn1"?value="按下去-兼容"> <a?href="11111111111111111111111111.html"?id="go">跳轉(zhuǎn)</a> </div> <script?type="text/javascript"> function?ee(event){?????//event為事件對(duì)象 ????alert(event.target.nodeName);???//target用于獲取事件目標(biāo)，target.nodeName指事件目標(biāo)的元素名稱，此處為input；type屬性用于獲取對(duì)象類型，如click點(diǎn)擊、mouseover鼠標(biāo)移上去等 ????event.stopPropagation();??????//阻止事件冒泡 ????} function?bb(){ ????alert("我是父級(jí)DIV!"); ????} function?stopgoto(even){ ????event.stopPropagation();?????//阻止事件冒泡 ????event.preventDefault();?????//阻止事件的默認(rèn)行為，如阻止a標(biāo)簽的默認(rèn)href鏈接 ????} var?btn1=document.getElementById("btn1"); var?fst=document.getElementById("First"); var?goto=document.getElementById("go"); //兼容瀏覽器 var?anxiaqu?=?{ ????//添加句柄 ????adddd:function(elem,type,handle){ ????????if(elem.addEventListener){ ????????????elem.addEventListener(type,handle,false); ????????????} ????????else?if(elem.attachEvent){ ????????????elem.attachEvent('on'+type,handle); ????????????} ????????else{ ????????????elem['on'+type]=handle; ????????????} ????}, ????//刪除句柄 ????detdd:function(elem,type,handle){ ????????if(elem.removeEventListener){ ????????????elem.removeEventListener(type,handle,false); ????????????} ????????else?if(elem.detachEvent){ ????????????elem.detachEvent('on'+type,handle); ????????????} ????????else{ ????????????elem['on'+type]=null; ????????????} ????} } anxiaqu.adddd(btn1,"click",ee); anxiaqu.adddd(fst,"click",bb); anxiaqu.adddd(goto,"click",stopgoto); //anxiaqu.detdd(btn1,"click",ee); </script> </body> </html>查看全部 -
兼容瀏覽器解決事件處理程序
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <style> .ee{text-decoration:line-through;?text-decoration:underline;?} </style> </head> <body> <input?type="button"?id="btn1"?value="按下去"> <script?type="text/javascript"> function?ee(){ ????alert("Hello?Haa!"); ????} var?btn1?=?document.getElementById("btn1"); var?anxiaqu?=?{ ????//添加句柄 ????adddd:function(elem,type,handle){ ????????if(elem.addEventListener){????//DOM2級(jí)事件處理程序：addEventListener() ????????????elem.addEventListener(type,handle,false); ????????????} ????????else?if(elem.attachEvent){????//IE事件處理程序：attachEvent() ????????????elem.attachEvent('on'+type,handle); ????????????} ????????else{ ????????????elem['on'+type]=handle;????//DOM0級(jí)事件處理程序：element.onclick=; ????????????}//js中的“.”符號(hào)可用['']代替，如：element.onclick等同于element['onclick'] ????}, ????//刪除句柄 ????detdd:function(elem,type,handle){ ????????if(elem.removeEventListener){???//DOM2級(jí)事件處理程序：removeEventListener() ????????????elem.removeEventListener(type,handle,false); ????????????} ????????else?if(elem.detachEvent){???//IE事件處理程序：detachEvent() ????????????elem.detachEvent('on'+type,handle); ????????????} ????????else{ ????????????elem['on'+type]=null;???//DOM0級(jí)事件處理程序,null賦值后，相當(dāng)于取消操作 ????????????} ????} } anxiaqu.adddd(btn1,"click",ee); //anxiaqu.detdd(btn1,"click",ee); </script> </body> </html>查看全部 -
DOM 事件對(duì)象? && ie 事件對(duì)象
查看全部 -
addEventListener()添加事件 removeEventListener()移除事件 btn3.addEventListener('click',showMes,false);
'chick': 事件名稱，DOM0級(jí)里為'onclick',此處為'click'。
showMes: 執(zhí)行的函數(shù)名。
布爾值 ：事件流類別 ? false--事件冒泡 ?ture--事件捕獲
注意 事件由onclick 變?yōu)槔齝lick， 所有事件不加on。
4、IE事件處理器
attachEvent:添加 ?參數(shù)為 （事件名稱，函數(shù)名）
detachEvent:刪除 參數(shù)為 （事件名稱，函數(shù)名）??
默認(rèn)冒泡事件流，不支持捕獲事件流
此處事件名稱 需保留'on' 如'onclick'
查看全部 -
事件冒泡：由具體的元素，最內(nèi)層的 逐級(jí)往上響應(yīng)
查看全部 -
事件對(duì)象
查看全部 -
事件對(duì)象
查看全部 -
阻止冒泡
查看全部
舉報(bào)
0/150
提交
取消