JavaScript中的事件處理程序

更新時間：2022年04月27日 08:35:46 作者：農(nóng)碼一生

這篇文章介紹了JavaScript中的事件處理程序，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、Html事件處理程序

弊端：與標(biāo)簽耦合度太高，直接綁定在標(biāo)簽體上

	<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   當(dāng)頁面中元素和引入的資源加載完畢之后執(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)點(diǎn)：解決了以上的兩個弊端，可以綁定對個事件

	<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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一段利用WSH獲取登錄時間的jscript代碼
用jscript實(shí)現(xiàn)獲取登錄時間的腳本
2008-05-05
javaScript嗅探執(zhí)行神器-sniffer.js
本文主要介紹了javaScript嗅探執(zhí)行神器-sniffer.js的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
javscript 數(shù)組扁平化的實(shí)現(xiàn)
這篇文章主要介紹了javscript 數(shù)組扁平化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JS與SQL方式隨機(jī)生成高強(qiáng)度密碼示例
這篇文章主要介紹了JS與SQL方式隨機(jī)生成高強(qiáng)度密碼,結(jié)合實(shí)例形式分析了javascript方式與SQL方式生成高強(qiáng)度密碼的相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下
2014-03-03
JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
分享十八個殺手級JavaScript單行代碼
這篇文章主要給大家分享了十八個殺手級JavaScript單行代碼,這些單行代碼可以幫助你提高工作效率并可以幫助調(diào)試代碼,對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2021-10-10
教你如何寫出可維護(hù)的JS代碼
在平時工作開發(fā)中，大部分開發(fā)人員都花費(fèi)大量的時間在維護(hù)其他人員的代碼。很難從頭開始開發(fā)新代碼，很多情況下都是以他人成果為基礎(chǔ)的，或者新增修改需求，自己寫的代碼也會被其他開發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護(hù)的代碼就顯得十分重要。
2021-05-05
使用JS代碼實(shí)現(xiàn)頁面添加水印的方法詳解
這篇文章主要介紹了使用80 行 JS 代碼實(shí)現(xiàn)頁面添加水?。何淖炙?、多行文字水印、圖片水印、文字&圖片水印,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
2024-05-05
javascript彈出窗口實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript彈出窗口實(shí)現(xiàn)代碼，非常人性化的設(shè)計(jì)，點(diǎn)擊頁面可以彈出窗口，感興趣的小伙伴們可以參考一下
2015-11-11