JavaScript事件處理程序詳解
本文實(shí)例為大家分享了js事件處理程序的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM0級(jí)DOM2級(jí)</title> </head> <body> <input id="btn1" type="button" value="click1" onclick="show()"> <input id="btn2" type="button" value="click2"> <input id="btn3" type="button" value="click3"> <script> function show() { alert("btn1"); } //DOM0級(jí) var btn2 = document.getElementById("btn2"); btn2.onclick = function () { alert("DOM0級(jí)btn2"); }; //DOM2級(jí) function show2() { alert("DOM2級(jí)btn3"); } var btn3 = document.getElementById("btn3"); // btn3.addEventListener("click",show2,false); // btn3.removeEventListener("click",show2,false); //ie事件處理程序 // btn3.attachEvent("onclick",show2); // btn3.detachEvent("onclick",show2); //跨瀏覽器事件處理程序 //能力檢測(cè) var eventUtil = { //添加具柄; addHandler:function (element,type,handler) { if (element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else { element["on"+type]=handler; } }, //刪除具柄; removeHandler:function (element,type,handler) { if (element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else { element["on"+type]=null; } } }; eventUtil.addHandler(btn3,"click",show2); eventUtil.removeHandler(btn3,"click",show2); </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript中的事件處理程序
- JS事件流與事件處理程序?qū)嵗治?/a>
- JavaScript常見事件處理程序?qū)嵗偨Y(jié)
- 深入理解在JS中通過四種設(shè)置事件處理程序的方法
- JavaScript的事件代理和委托實(shí)例分析
- js中的事件委托或是事件代理使用詳解
- JavaScript事件代理和委托詳解
- js事件委托和事件代理案例分享
- JavaScript通過事件代理高亮顯示表格行的方法
- JS實(shí)現(xiàn)為動(dòng)態(tài)添加的元素增加事件功能示例【基于事件委托】
- javascript事件委托的方式綁定詳解
- JS事件處理機(jī)制及事件代理(事件委托)實(shí)例詳解
相關(guān)文章
npm安裝依賴時(shí)出現(xiàn)Peer Dependencies沖突報(bào)錯(cuò)解決分析
這篇文章主要為大家介紹了npm安裝依賴時(shí)出現(xiàn)Peer Dependencies沖突報(bào)錯(cuò)解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09使用wxapp-img-loader自定義組件實(shí)現(xiàn)微信小程序圖片預(yù)加載功能
由于微信小程序沒有提供類似 Image 這樣的 JS 對(duì)象,要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些,wxapp-img-loader自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能,需要的朋友可以參考下2018-10-10Javascript中點(diǎn)擊(click)事件的三種寫法舉例
在JavaScript中Click事件是一種常見的用戶交互事件,表示用戶在網(wǎng)頁(yè)上點(diǎn)擊某個(gè)元素的動(dòng)作,這篇文章主要給大家介紹了關(guān)于Javascript中點(diǎn)擊(click)事件的三種寫法,需要的朋友可以參考下2024-06-06JS獲取時(shí)間的相關(guān)函數(shù)及時(shí)間戳與時(shí)間日期之間的轉(zhuǎn)換
時(shí)間戳和時(shí)間日期的轉(zhuǎn)換是常見的操作,下面就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)它們之間的相互轉(zhuǎn)換,感興趣的朋友一起學(xué)習(xí)吧2016-02-02JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效,圖片輪播效果特別適合做產(chǎn)品展示,具有很強(qiáng)的立體效果,感興趣的小伙伴可以參考下。2015-09-09