韓順平 javascript教學視頻_學習筆記23_js事件驅動機制深入理解_js常用事件_js版計算器

js事件可以被多個函數監聽

例子如下:
<html>    
	<head>   
		<script language="javascript">     
			function test1(eventObj){
			
				window.alert("OK1");
			}
			function test2(eventObj){
			
				window.alert("OK2");
			}
		</script>    
	</head>    
	<body >   
	<input type="button" value="一個事件可以被多個函數監聽" onclick="test1(this),test2(this)"/> <!-- 一個事件可以被多個函數監聽 -->	
	</body>    
</html>    

js事件特別說明:
特別強調一點:並不是所有的html元素都有相同的event事件(對象),這個請大家在做項目的時候特別注意,比如提交按鈕有onsubmit事件,但是輸入框就沒有,具體請大家參考js幫助文檔。

window有三個事件:
onload:頁面打開
onbeforeunload:頁面關閉前
onunload:頁面關閉後



綜合案例如下:

<html>    
	<head>   
		<script language="javascript">     
			function test1(eventObj){
			
				window.alert("OK1");
			}
			function test2(eventObj){
			
				window.alert("OK2");
			}
			function test3(eventObj){
			
				window.alert("輸入框被選中");
			}
			function test4(){
			
				window.alert("onload.....");
				//把鼠標定位到text輸入框
				document.getElementById("text1").onfocus();//這個有問題,後面再講
			}
			function test5(){
			
				window.alert("onunload.....");//頁面關閉前彈出,這個有問題,後面再講
				
			}
			function test6(){
			
				window.alert("onbeforeunload.....");
				
			}
			function test7(){
			
				window.alert("不要點擊右鍵");
				return false;
				
			}
			function test8(){
			
				window.alert("不能選內容哦");
				return false;
				
			}
		</script>    
	</head>    
	<body onselectstart="return test8()" oncontextmenu="return test7()" onload="test4()" onunload="test5()" onbeforeunload="test6()">   
	<div>不能拷貝內容哦</div>
	<input type="button" value="多個函數監聽" onclick="test1(this),test2(this)"/>
    <input type="text" id="text1" onfocus="test3(this)"/> 	
	</body>    
</html>    

oncontextmenu 事件:return false ;就是不能點擊右鍵

onselectstart 事件: return false;就是不能複製頁面內容

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章