JS foundation DOM Event object

Posted by interrupt on Sun, 09 Feb 2020 18:13:48 +0100

brief introduction

The Event object represents the state of the Event, such as the element in which the Event occurs, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

Events are usually used in conjunction with functions, which are not executed before the event!

==Note: see JS foundation DOM Event object manual for details==

Simple example of event handle

Button click trigger event, click input box to trigger event

<html>
<head>

</head>
<body>

<input type="text" id="test1" placeholder="Click the input box to disappear and move out of the display" onclick="showtime" onmousedown="f1()" onmouseout="f2()">
<!-- Define the input box, click and move the mouse to trigger different events, and events are a good way to write -->

<input type="text" name="user" placeholder="Move to this position, disappear, move out of the display" onclick="showtime" onmouseover="placeholder=''" onmouseout="placeholder='Move to this position, disappear, move out of the display'">
<!-- Define the input box, move the mouse in and out to trigger different events -->

<script>
	// Method of hiding input box information by mouse click
	function f1(){
		var ele=document.getElementById("test1");
		ele.placeholder='';
	}
	// Mouse removal display input box information method
	function f2(){
		var ele=document.getElementById("test1");
		ele.placeholder='Click the input box to disappear and move out of the display';
	}
</script>

</body>
</html>

Event.target Click to display the tag name

<html>
	<head>

		<script type="text/javascript">

			// Define the Event.target object method to show the name of the click tag
			function f1()
				{
					targ = event.target;						//Returns the target node of the event
					var tname = targ.tagName;					//Get event node name
					alert("You clicked[ " + tname + " ]Label");		//Window display time name
				}
		</script> 
	</head>

	<!-- Test tag -->
	<body onmousedown="f1()">

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

	</body>
</html>

Show mouse click coordinates

<html>
<head>
<script type="text/javascript">
	// Define the event.client coordinate object method for display
	function show_coords()
		{
			alert("X coordinate: " + event.clientX + ", Y coordinate: " + event.clientY);
		};
</script>
</head>

	<body onmousedown="show_coords()">		<!-- Perform a defined display coordinate method	 -->		
	<p>Please click anywhere on the page.</p>				<!-- Prompting language -->

</body>
</html>

Test whether the key is pressed

<html>
 <head> 
  <script type="text/javascript">
function isKeyPressed(event)
{
  if (event.shiftKey==1)
    {
    alert("shift Press [press] button")
    }
  else
    {
    alert("shift Press [non press] button")
    }
  }
</script> 
 </head> 
 <body> 
  <!-- <body onmousedown="isKeyPressed(event)"> --> 
  <button onmousedown="isKeyPressed(event)">Test button</button> 
  <p>Testable shif Is the key pressed, alt,ctrl Similar to other keys</p>   
 </body>
</html>

onsubmit event

Example 1: submit event

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

<form name="testform" onsubmit="alert('What you enter is:' + testform.fname.value)">
	<p>Please enter content</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

</body>
</html>

Example 2: submit event

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

<form id="testform" action="">
	<p>Please enter content</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

<script>
	var ele = document.getElementById("testform");
	ele.onsubmit=function(){
		alert('What you enter is:' + testform.fname.value );
	}
</script>
</body>
</html>

Example 3: block submission and propagation

After the submission is blocked, data will not be sent to the background, and no clear text data will be submitted in the browser address bar

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

<form id="testform" action="">
	<p>Please enter content</p>
	<input type="text" name="fname" />
	<input type="submit" value="Submit" />
</form>

<script>
	var ele = document.getElementById("testform");
	ele.onsubmit=function(){
		alert('What you enter is:' + testform.fname.value );

		return false;                   		//Block submission method 1
		
		e.preventDefault();						//Block submission method 2
		
		e.stopPropagation();					//Prevent events from propagating to external DIV
	}
</script>
</body>
</html>

Topics: Javascript

Programmer Think