JS基礎-DOM Event對象

時間 2019-12-05

標籤基礎 dom event 對象欄目 JavaScript 简体版

原文原文鏈接

簡介

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。javascript

事件一般與函數結合使用，函數不會在事件發生前被執行！html

==注：詳表見《JS基礎-DOM Event對象手冊》==java

事件句柄簡單示例

按鈕點擊觸發事件，點擊輸入框觸發事件瀏覽器

<html>
<head>

</head>
<body>

<input type="text" id="test1" placeholder="點擊輸入框消失移出展示" onclick="showtime" onmousedown="f1()" onmouseout="f2()">
<!-- 定義輸入框，鼠標點擊和移出觸發不一樣事件，而事件是寫好的方法 -->

<input type="text" name="user" placeholder="移動到該位置消失移出展示" onclick="showtime" onmouseover="placeholder=''" onmouseout="placeholder='移動到該位置消失移出展示'">
<!-- 定義輸入框，鼠標移入和移出觸發不一樣事件 -->

<script>
	// 鼠標點擊隱藏輸入框信息方法
	function f1(){
		var ele=document.getElementById("test1");
		ele.placeholder='';
	}
	// 鼠標移除顯示輸入框信息方法
	function f2(){
		var ele=document.getElementById("test1");
		ele.placeholder='點擊輸入框消失移出展示';
	}
</script>

</body>
</html>

Event.target點擊展現標籤名稱

<html>
	<head>

		<script type="text/javascript">

			// 定義Event.target對象方法，用於展現點擊標籤的名稱
			function f1()
				{
					targ = event.target;						//返回事件的目標節點
					var tname = targ.tagName;					//獲取事件節點名稱
					alert("您點擊的是【 " + tname + " 】標籤");		//窗口展現時間名稱
				}
		</script> 
	</head>

	<!-- 測試標籤 -->
	<body onmousedown="f1()">

		<h1>TEST</h1>
		<p>This is test !!!</p>
		<img src="test.jpg" />

	</body>
</html>

顯示鼠標點擊的座標

<html>
<head>
<script type="text/javascript">
	// 定義event.client座標對象方法，用於展現
	function show_coords()
		{
			alert("X 座標: " + event.clientX + ", Y 座標: " + event.clientY);
		};
</script>
</head>

	<body onmousedown="show_coords()">		<!-- 執行定義好的顯示座標方法	 -->		
	<p>請在頁面中任意點擊。</p>				<!-- 提示語 -->

</body>
</html>

測試按鍵是否被按下

<html>
 <head> 
  <script type="text/javascript">
function isKeyPressed(event)
{
  if (event.shiftKey==1)
    {
    alert("shift按鍵【按下】狀態")
    }
  else
    {
    alert("shift按鍵【非按下】狀態")
    }
  }
</script> 
 </head> 
 <body> 
  <!-- <body onmousedown="isKeyPressed(event)"> --> 
  <button onmousedown="isKeyPressed(event)">測試按鈕</button> 
  <p>可測試shif鍵是否被按下，alt、ctrl等其餘按鍵類同</p>   
 </body>
</html>

onsubmit事件

示例一：提交事件

<html>
<head></head>
<body>

<form name="testform" onsubmit="alert('您輸入的內容是：' + testform.fname.value)">
	<p>請輸入內容</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

</body>
</html>

示例二：提交事件

<html>
<head></head>
<body>

<form id="testform" action="">
	<p>請輸入內容</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

<script>
	var ele = document.getElementById("testform");
	ele.onsubmit=function(){
		alert('您輸入的內容是：' + testform.fname.value );
	}
</script>
</body>
</html>

示例三：阻止提交和傳播

阻止提交後表現爲：不日後臺發送數據，瀏覽器地址欄無提交明文數據函數

<html>
<head></head>
<body>

<form id="testform" action="">
	<p>請輸入內容</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

<script>
	var ele = document.getElementById("testform");
	ele.onsubmit=function(){
		alert('您輸入的內容是：' + testform.fname.value );

		return false;                   		//阻止提交方式一
		
		e.preventDefault();						//阻止提交方式二
		
		e.stopPropagation();					//阻止事件向外層DIV傳播
	}
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。