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>