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

您可能感興趣的文章: