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

Detailed explanation of MYSQL large-scale write problem optimization

Abstract: When people talk about MySQL performanc...

How to use limit_req_zone in Nginx to limit the access to the same IP

Nginx can use the limit_req_zone directive of the...

Detailed process of installing logstash in Docker

Edit docker-compose.yml and add the following con...

Learn how to write neat and standard HTML tags

Good HTML code is the foundation of a beautiful w...

MySQL tutorial on how to deploy multiple instances on a single machine using mysqld_multi

Table of contents 1. MySQL compilation and instal...

Graphical analysis of MYSQL5.7 configuration file location in Windows environment

1. MYSQL installation directory Copy the code as ...

Detailed explanation of how to use element-plus in Vue3

Table of contents 1. Installation 2. Import in ma...

Implementation of crawler Scrapy image created by dockerfile based on alpine

1. Download the alpine image [root@DockerBrian ~]...

A super detailed Vue-Router step-by-step tutorial

Table of contents 1. router-view 2. router-link 3...

MySQL loop inserts tens of millions of data

1. Create a test table CREATE TABLE `mysql_genara...

Use of SerialPort module in Node.js

Table of contents Purpose Module Installation Bas...

MySQL query statement process and basic concepts of EXPLAIN statement and its optimization

The performance of your website or service depend...

Docker image optimization (from 1.16GB to 22.4MB)

Table of contents The first step of optimization:...

Detailed explanation of MySQL startup options and system variables examples

Table of contents Boot Options Command Line Long ...

Complete steps to achieve high availability with nginx combined with keepalived

Preface In order to meet the high availability of...