page events
: In what order are HTML pages loaded?
Answer: The page is loaded from top to bottom in the order in which the code is written.
Problems that may occur : If JavaScript is used to operate DOM elements before the page is loaded, syntax errors will occur.
Solution : Page events can change the execution timing of JavaScript code.
Focus events
In web development, focus events are mostly used for form validation functions and are one of the most commonly used events.
For example, changing the style of the text box when the text box gets focus, validating the data entered in the text box when the text box loses focus, etc.
In order to let everyone better understand how to use focus events, the following is a demonstration to verify whether the username and password are empty.
Code implementation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Verify that username and password are empty</title>
<style>
body{background:#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
.ipt{width:260px;padding:4px 2px;}
.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font- size:13px;}
</style>
</head>
<body>
<p id="tips" class="tips"></p>
<p class="box">
<p><label>Username: <input id="user" class="ipt" type="text"></label></p>
<p><label>Password: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Login</button></p>
</p>
<script>
window.onload = function() {
addBlur($('user')); // Check whether the value is empty after the element with the id of user loses focus. addBlur($('pass')); // Check whether the value of the element with the id of pass loses focus. Whether the value is empty};
function $(obj) { // Get the specified element based on id return document.getElementById(obj);
}
function addBlur(obj) { // Add a focus loss event for the specified element obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // Check whether the form is empty if (obj.value === '') {
$('tips').style.display = 'block';
$('tips').innerHTML = 'Note: The input content cannot be empty! ';
} else {
$('tips').style.display = 'none';
}
}
</script>
</body>
</html> Mouse events
Mouse events are the most commonly used events in Web development.
For example, switching the content displayed in the Tab bar when the mouse slides over; using the mouse to drag the status box to adjust its display position, etc. These common web page effects all use mouse events.
In project development, some commonly used mouse attributes are often involved, which are used to obtain the current mouse position information.
The pageX and pageY attributes are not compatible in IE6-8 browsers. Therefore, compatibility with IE6~8 browsers is required during project development.
The coordinates of the mouse in the document are equal to the coordinates of the mouse in the current window plus the length of the text rolled by the scroll bar.
In order to let everyone better understand the use of mouse events, let's take the circular display of the mouse click position as an example.
Code implementation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Show mouse click position</title>
<style>
.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
</style>
</head>
<body>
<p id="mouse" class="mouse"></p>
<script>
var mouse = document.getElementById('mouse');
//Requirement: When the mouse clicks on the page, obtain the click position and display a small dot document.onclick = function(event) {
// Get the compatible processing of the event object var event = event || window.event;
// The position of the mouse on the page var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calculate the position where <p> should be displayed var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// Display <p> at the location clicked by the mouse
mouse.style.display = 'block';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</body>
</html> [Case] Mouse drag effects
The position of the box (left and top values) = the position of the mouse (left and top values) - the distance between the mouse and the box (left and top values) when the mouse is pressed.
Give an example
Code implementation ideas :
① Write HTML and design pop-up boxes to implement drag-and-drop effects.
② Add mousedown event and its handler to the drag bar.
③ Handle mouse movement events to achieve mouse dragging effects.
④ Handle the event of releasing the mouse button so that the pop-up box will no longer move after the mouse button is released.
Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mouse drag</title>
<style>
body{margin:0}
.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
#box_close{float:right;cursor:pointer}
</style>
</head>
<body>
<p id="box" class="box">
<p id="drop" class="hd">
Registration information (can be dragged and dropped)
<span id="box_close">【Close】</span>
</p>
<p class="bd"></p>
</p>
<script>
// Get the dragged box and drag strip var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // Press the mouse on the drag bar to drag the box var event = event || window.event;
// Get the position when the mouse is pressed var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calculate the position of the mouse clicked position from the box var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // Get the mouse position when the mouse moves. The entire box follows the mouse position var event = event || window.event;
// Get the position of the mouse after movement var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calculate and set the position of the box after movement box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {//Cancel the movement of the box when the mouse button is released document.onmousemove = null;
};
</script>
</body>
</html> Keyboard events
Keyboard events refer to events triggered when the user uses the keyboard.
For example, the user presses the Esc key to close the opened status bar, and presses the Enter key to directly switch the cursor up and down, etc.
The following demonstrates the use of Enter key switching. The details are as shown in the example.
Code implementation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Press Enter to switch</title>
</head>
<body>
<p>User name: <input type="text"></p>
<p>E-mail: <input type="text"></p>
<p>Mobile phone number: <input type="text"></p>
<p>Personal description: <input type="text"></p>
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = function(e) {
// Get the compatible processing of the event object var e = event || window.event;
// Determine whether the pressed key is Enter. If so, let the next input get focus if (e.keyCode === 13) {
// Traverse all input boxes and find the subscript of the current input for (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) {
// Calculate the index of the next input element var index = i + 1 >= inputs.length ? 0 : i + 1;
break;
}
}
// If the next input is still a text box, get the keyboard focus if (inputs[index].type === 'text') {
inputs[index].focus(); // Trigger focus event }
}
};
}
</script>
</body>
</html> Note that
the key values saved in the keypress event are ASCII codes, and
the key values saved in the keydown and keyup events are virtual key codes.
For details, please refer to manuals such as MDN.
Form events
form events refer to events that occur when operating web forms.
For example, verification of the form before submission, confirmation operation when the form is reset, etc. JavaScript provides related form events.
The following demonstrates whether to submit and reset form data as an example. The details are as shown in the example.
Code implementation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Form events</title>
</head>
<body>
<form id="register">
<label>Username: <input id="user" type="text"></label>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>
// Get the form and element objects that need to be verified var regist = document.getElementById('register');
var user = document.getElementById('user');
regist.onsubmit = function(event) { // Add a submit event to the form // Get the event object and output the current event type var event = event || window.event;
console.log(event.type);
// Determine whether the form element content is empty. If it is empty, return false, otherwise return true
return user.value ? true : false;
};
regist.onreset = function (event) { // Add a reset event to the form // Get the event object and output the current event type var event = event || window.event;
console.log(event.type);
// Determine whether to confirm the reset, press "OK" to return true, press "Cancel" to return false
return confirm('Please confirm whether you want to reset the information. After the reset, all the contents filled in the form will be cleared');
};
</script>
</body>
</html> Hands-on
picture enlargement effect
analysis How to implement image enlargement effect:
① Prepare two identical pictures, a small picture and a large picture.
② The thumbnail is displayed in the product display area.
③ The large image is used to display the corresponding area in the large image proportionally when the mouse moves on the small image.
Code implementation ideas :
① Write an HTML page to display small pictures, masks that hide the mouse, and large pictures.
② When the mouse moves on the small image, the mouse mask and large image are displayed.
③ When the mouse moves, let the mask move in the small picture.
④ Limit the movable range of the mask in the small image.
⑤ Display the large image proportionally based on the coverage of the mask in the small image.