JavaScript事件處理程序詳解
更新時間:2017年09月19日 08:38:19 作者:喵嘻嘻
這篇文章主要為大家詳細介紹了JavaScript事件處理程序的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js事件處理程序的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM0級DOM2級</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級
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
alert("DOM0級btn2");
};
//DOM2級
function show2() {
alert("DOM2級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);
//跨瀏覽器事件處理程序
//能力檢測
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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析
這篇文章主要為大家介紹了npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
使用wxapp-img-loader自定義組件實現(xiàn)微信小程序圖片預(yù)加載功能
由于微信小程序沒有提供類似 Image 這樣的 JS 對象,要實現(xiàn)圖片的預(yù)加載要麻煩一些,wxapp-img-loader自定義組件可以在微信小程序中實現(xiàn)圖片預(yù)加載功能,需要的朋友可以參考下2018-10-10
JS獲取時間的相關(guān)函數(shù)及時間戳與時間日期之間的轉(zhuǎn)換
時間戳和時間日期的轉(zhuǎn)換是常見的操作,下面就通過代碼實例介紹一下如何實現(xiàn)它們之間的相互轉(zhuǎn)換,感興趣的朋友一起學習吧2016-02-02

