JavaScript中的事件處理程序
更新時間：2022年04月27日 08:35:46 作者：農(nóng)碼一生
這篇文章介紹了JavaScript中的事件處理程序，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、Html事件處理程序
弊端：與標簽耦合度太高，直接綁定在標簽體上
<body>
<button type="button" onclick="alert('消息框');" onmouseout="console.log('控制臺')">Html事件處理程序</button>
<button type="button" onclick="fun1();" onmouseout="console.log('控制臺')">Html事件處理程序</button>
<script type="text/javascript">
//Html事件處理程序
function fun1(){
alert("消息框");
}
//加載事件 load 當頁面中元素和引入的資源加載完畢之后執(zhí)行里面的代碼
window.onload = function(){
//。。。。。。。
}
</script>
</body>二 、DOM 0級事件處理程序
弊端：不能給同一個元素綁定同一個事件多次
<body>
<button type="button" id="but1">DOM0級事件處理程序</button>
<script type="text/javascript">
/* DOM0級事件處理程序 */
//獲取元素
var but1 = document.getElementById("but1");
// 2.給元素綁定事件
but1.onclick = function(){
console.log('DOM0級事件處理程序1');
}
//添加的第二的Click事件起作用，第一個被覆蓋
but1.onclick = function(){
console.log('DOM0級事件處理程序2');
}
</script>
</body>三、DOM2級事件處理程序
優(yōu)點：解決了以上的兩個弊端，可以綁定對個事件
<body>
<button type="button" id="but2">DOM2級事件處理程序</button>
<button type="button" id="but3">刪除DOM2級事件處理程序</button>
<script type="text/javascript">
//DOM2級事件處理程序
//獲取元素
var but2 = document.getElementById("but2");
var but3 = document.getElementById("but3");
but2.addEventListener("click",function(){
console.log("DOM2級事件處理程序1");
});
but2.addEventListener("click",function(){
console.log("DOM2級事件處理程序2");
});
function fun3(){
console.log("有方法名的處理程序");
}
but2.addEventListener('mouseover',fun3);
//移除but2的某個事件
but3.addEventListener("click",function(){
but2.removeEventListener('mouseover',fun3);
});
</script>
</body>?以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
用jscript實現(xiàn)獲取登錄時間的腳本2008-05-05
javaScript嗅探執(zhí)行神器-sniffer.js
本文主要介紹了javaScript嗅探執(zhí)行神器-sniffer.js的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了javscript 數(shù)組扁平化的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了JS與SQL方式隨機生成高強度密碼,結合實例形式分析了javascript方式與SQL方式生成高強度密碼的相關操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03
JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家分享了十八個殺手級JavaScript單行代碼,這些單行代碼可以幫助你提高工作效率并可以幫助調(diào)試代碼,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
在平時工作開發(fā)中，大部分開發(fā)人員都花費大量的時間在維護其他人員的代碼。很難從頭開始開發(fā)新代碼，很多情況下都是以他人成果為基礎的，或者新增修改需求，自己寫的代碼也會被其他開發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護的代碼就顯得十分重要。2021-05-05
這篇文章主要介紹了使用80 行 JS 代碼實現(xiàn)頁面添加水?。何淖炙 ⒍嘈形淖炙?、圖片水印、文字&圖片水印,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了javascript彈出窗口實現(xiàn)代碼，非常人性化的設計，點擊頁面可以彈出窗口，感興趣的小伙伴們可以參考一下2015-11-11