Detailed explanation of using javascript to handle common events

Detailed explanation of using javascript to handle common events

JS events refer to behaviors that occur on browser forms or HTML elements and are willing to trigger the execution of JS code blocks. Next, let's take a look at the related events.

1. Form events

For example, the onload event: when the page is fully loaded (including images, js files, css files, etc.), this event will be triggered.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flower Dog Online</title>
		<script>
		window.onload = function(){
			var mydiv = document.getElementById("mydiv");
			alert("Page loading completed, the content of mydiv is: "+mydiv.innerText);
		}
		</script>
	</head>
	<body>
		<div id='mydiv'>I am a flower dog, a flower of a flower dog, a dog of a flower dog. </div>
	</body>
</html>

insert image description here
There are also:

Resize event: When the browser window is adjusted to a new width or height, the resize event is triggered.

Scroll event: The scroll event is triggered when the document or browser window is scrolled.

Focus event: refers to an element gaining or losing focus, such as selecting or unselecting a text box.

2. Mouse events

For example, when the mouse clicks the left button, an onclick event occurs:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flower Dog Online</title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
		function mouseclick(){
		alert('Page clicked');
		}
		</script>
	</head>
	<body onclick="mouseclick()">
		<div id='mydiv'>I am a flower dog, a flower of a flower dog, a dog of a flower dog. </div>
	</body>
</html>

注意：將html和body 的樣式表都設置為width: 100%，height: 100%，否則onclick無效。

insert image description here

3. Keyboard events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flower Dog Online</title>
		<style>
			html,body{
				background-color: aquamarine;
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
		function keydown(event){ 
			if(event.keyCode==37){
				alert(event.keyCode +'You pressed the left button');
			}
			if(event.keyCode==38){
				alert(event.keyCode +'You pressed the up key');
			}
			if(event.keyCode==39){
				alert(event.keyCode +'You pressed the right button');
			}
			if(event.keyCode==40){
				alert(event.keyCode +'You pressed the down key');
			}
		}
		</script>
	</head>
	<body onkeydown="keydown(event)">
	</body>
</html>

insert image description here

4. Common event methods (including window events, mouse events, keyboard events, text events)

method describe
onabort Image loading interrupted
onblur The element loses focus
onchange User changes the content of a field
onclick Click an object with the mouse
ondblclick Double-click an object
onerror An error occurred while loading the document or image
onfocus The element has focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or
onkeyup A keyboard key was released
onload A page or image has finished loading.
onmousedown A mouse button is pressed
onmousemove The mouse is moved
onmouseout Move the mouse away from an element
onmouseover The mouse is moved over an element
onmouseup A mouse button is released
onreset The reset button is clicked
onresize The window or frame is resized
onselect Text is selected
onsubmit The submit button is clicked
onunload User logout page

5. Event bubbling and event capturing

When an event occurs, an event stream is generated. When an HTML element generates an event, the event is propagated between the element node and the root node in a specific order, similar to recursion and return. The event triggering method is as follows: addEventListener("click","doSomething","true"); If the third parameter is true, it is event capture, if it is false, it is event bubbling, the default is bubbling.

Capture event propagation:


insert image description here

Bubbling event propagation


insert image description here

This is the end of this article on using javascript to handle common events. For more information about how to handle common events with js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of JavaScript BOM composition and common events
  • Summary of common examples of JS event binding
  • Introduction to Common JavaScript Events
  • Detailed explanation of js mobile event basics and common event libraries
  • A brief discussion on the common methods of JavaScript event binding and their advantages and disadvantages
  • Learn more about the most commonly used JavaScript events

<<:  MySQL knowledge points for the second-level computer exam mysql alter command

>>:  IIS and APACHE implement HTTP redirection to HTTPS

Recommend

6 Practical Tips for TypeScript Development

Table of contents 1. Determine the entity type be...

Usage of Linux userdel command

1. Command Introduction The userdel (user delete)...

Several situations that cause MySQL to perform a full table scan

Table of contents Case 1: Case 2: Case 3: To summ...

Detailed explanation of the pitfalls of Apache domain name configuration

I have never used apache. After I started working...

A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode

Prerequisite: Percona 5.6 version, transaction is...

How to configure pseudo-static and client-adaptive Nginx

The backend uses the thinkphp3.2.3 framework. If ...

Detailed explanation of keepAlive usage in Vue front-end development

Table of contents Preface keep-avlive hook functi...

Docker: Modifying the DOCKER_OPTS parameter in /etc/default/docker does not take effect

By default, /etc/default/docker configuration wil...

A brief introduction to VUE uni-app basic components

1. scroll-view When using vertical scrolling, you...

Detailed explanation of the solution to the failure of VMware to open the module diskearly

VMWare (Virtual Machine ware) is a "virtual ...

MySQL in Windows net start mysql Start MySQL service error occurs System error solution

Table of contents 1- Error details 2-Single Solut...

Vue global filter concepts, precautions and basic usage methods

Table of contents 1. The concept of filter 1. Cus...

Detailed explanation on reasonable settings of MySQL sql_mode

Reasonable setting of MySQL sql_mode sql_mode is ...

HTML (css style specification) must read

CSS style specifications 1. Class Selector 2. Tag...

How to set focus on HTML elements

Copy code The code is as follows: <body <fo...