directory

Mouse click event

Mouse release or press event

Mouse in/out events

Mouse movement event

Mouse click events and double – click events

Mouse drag events

Mouse and keyboard events are the most frequently used operations in page operations. Mouse events can be used to achieve special effects when the mouse moves and clicks on the page, and the keyboard can also be used to create shortcuts on the page.

Mouse click event

Onclick is an event that is triggered when the mouse clicks. Click is the complete process of holding the mouse pointer over an object, pressing the mouse button, and releasing the mouse button without moving the mouse pointer. Click events are typically applied to Button objects, Checkbox objects, Image objects, Link objects, Radio objects, Reset objects, and Submit objects. Button objects typically only use onclick event handlers. Because the object does not get any information from the user, the button object would have no effect without the onclick event handler.

Note: The click event does not work if you press the mouse button on an object, then move the mouse out of the object and release the mouse when using an object’s single action. The handler for the click event must be pressed release on the object before it executes. Example: Change background color by button.

This example dynamically changes the background color of the page by clicking the “Change Background” button. When the user clicks the button again, the page background will be displayed in a different color.

The code is as follows:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript">
			var arraycolor=new Array("olive"."teal"."red"."blue"."maroon"."navy");
			var n=0;
			function turncolors(){
				if(n==(arraycolor.length-1)) n=0;
				n++;
				document.bgColor=arraycolor[n];
			}
		</script>
	</head>
	<body>
		<input type="button" name="Submit" value="Background color change" onclick="turncolors()"/>
	</body>
</html>
Copy the code

Demo effect:

 

Mouse release or press event

The mouse press or release events are onMouseDown and onMouseup events, respectively. The onMouseDown event is used to trigger the event handler when the mouse is down, and the onMouseup event is used to trigger the event handler when the mouse is released. When you click an object with the mouse, you can use these two events to achieve its dynamic effect. Example: Making hyperlink text with events

This example uses the onMouseDown and onmouseup events to make the text similar to (hyperlink) markup, that is, when you press the mouse over the text, change the color of the text, when you release the mouse over the text, restore the default color of the text, and pop up an empty page (can link to any web page). The running result is shown in the figure. Code:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript" type="text/javascript">
			function mousedown(event){  // Set the color for mouse down
				var e=window.event;
				var obj=e.srcElement;
				obj.style.color='red';
			}
			function mouseup(event){  // Set the color when the mouse is released
				var e=window.event;
				var obj=e.srcElement;
				obj.style.color='blue';
			}
		</script>
	</head>
	<body >
		<p style="color: green;" onmousedown="mousedown()" onmouseup="mouseup()">change</p>	
	</body>
</html>
Copy the code

 

Mouse in/out events

Mouse in and mouseout events are onMouseOver and onMouseout events, respectively. Here, the onMouseOver event triggers the event handler when the mouse moves over the object, and the onMouseout event triggers the event handler when the mouse moves over the object. You can use these two events to achieve the dynamic effect of moving the mouse over a specified object.

Mouse movement event

The mouse movement event (onMousemove) is the event handler triggered when the mouse moves on the page. In this event, the document object can be used to read the mouse position in the page in real time. Example: Display the current mouse position on the page in the status bar

In this example, the status bar of the page displays the current position of the mouse (x,y) when the mouse moves on the page.

Code:

<body style="height: 3000px; position: relative;">
	
	<script type="text/javascript">
		document.addEventListener('mousemove'.function(){
			console.log('Mouse movement')
			x = window.event.x
			y = window.event.y
			console.log('(%d,%d)',x,y)
		},false)
		
	</script>
</body>
Copy the code

Running results:

 

Mouse click events and double – click events

Click on the div box, click on the console output click, double click box console output double click

Code:

<body style="height: 3000px; position: relative;">
	<div id="box1">
		
	</div>
	
	<script type="text/javascript">
		var input = document.getElementById('box1')
		// Add focus listener events
		// Set the delay for the click because the click will also be executed when the click is double-clicked. If the click is not responded, the time will be cleared and the click will not be output
		var time
		input.addEventListener('click'.function(){
			/ / clearTimeout clearing time
			clearTimeout(time)
			time = setTimeout(function(){
				console.log('click')},300)},false)
		input.addEventListener('dblclick'.function(){
			clearTimeout(time)
			console.log('double')},false)
	</script>
</body>
Copy the code

Running results:

 

Mouse drag events

Set up a div box, mouse select value box can be dragged after pressing

<body style="height: 3000px; position: relative;">
	<div id="box1">
		
	</div>
	<script type="text/javascript">
		var move = document.getElementById('box1')
		// Click the x,y position
		basex = 0
		basey = 0
		// Move the x and y positions
		movex = 0
		movey = 0
		move.addEventListener('mousedown'.function(e){
			var ev = e || window.event
			basex = ev.pageX
			basey = ev.pageY
			document.onmousemove = function(e){
				var ee = e || window.event
				
				movex = ee.pageX - basex
				movey = ee.pageY - basey
				// The next time you move basex,y becomes the current position
				basex = ee.pageX
				basey = ee.pageY
				move.style.left = move.offsetLeft + movex + 'px'
				move.style.top = move.offsetTop + movey + 'px'}},false)
		// Cancel the event when the mouse is up
		move.addEventListener('mouseup'.function(){
			document.onmousemove = null
		},false)
	</script>
</body>
Copy the code

Box1 Properties of a box

#box1{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
}
Copy the code

Running results: