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

Tomcat server security settings method

Tomcat is an HTTP server that is the official ref...

Detailed installation tutorial of mysql5.7.19 decompressed version (with pure cracked Chinese version SQLYog)

Mysql5.7.19 version is a new version launched thi...

Solution to define the minimum height of span has no effect

The span tag is often used when making HTML web pa...

How to display a small icon in front of the browser URL

When you browse many websites, you will find that ...

How to use Javascript to generate smooth curves

Table of contents Preface Introduction to Bezier ...

Common usage of regular expressions in Mysql

Common usage of Regexp in Mysql Fuzzy matching, c...

CSS to achieve the image hovering mouse folding effect

CSS to achieve the image hovering mouse folding e...

HTML Basics - Simple Example of Setting Hyperlink Style

*** Example of setting the style of a hyperlink a...

How to print highlighted code in nodejs console

Preface When the code runs and an error occurs, w...

Six-step example code for JDBC connection (connecting to MySQL)

Six steps of JDBC: 1. Register the driver 2. Get ...

Reasons and solutions for MySQL failing to create foreign keys

When associating two tables, a foreign key could ...

Forever+nginx deployment method example of Node site

I recently bought the cheapest Tencent cloud serv...

Vue.js implements the code of clicking the icon to zoom in and leaving

The previous article introduced how Vue can reali...

Example of usage of keep-alive component in Vue

Problem description (what is keep-alive) keep-ali...

Learn MySQL index pushdown in five minutes

Table of contents Preface What is index pushdown?...