JS基础-DOM Event对象-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

简介

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

==注：详表见《JS基础-DOM Event对象手册》==

事件句柄简单示例

按钮点击触发事件，点击输入框触发事件

<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>

转载于:https://my.oschina.net/zhaojunhui/blog/1859474