event processing
5.1. Basic concepts of events
HTML events are "events" that occur on HTML elements. When JavaScript is used in HTML pages, JavaScript can "deal with" these events.
The syntax rules are:
<element event="javascript" />
In HTML documents, all valid elements have corresponding events, such as click, slide, etc.
Once an event is triggered, JavaScript code will be executed, which is called event driven
5.2. Mouse and keyboard events
onclick event
<button onclick="handleClick()">determine</button>
<script>
function handleClick() {
console.log("Trigger click event!");
}
</script>
Because an HTML document is a typical document with nested elements, if a child element has a click event, by default, the click event of the parent element will also be triggered because it is wrapped by the parent element.
This phenomenon is called event bubbling.
The stopPropagation() function of the event object event can prevent the event from propagating to the superior when the child element triggers the event.
<body onclick="handleClick()">
<button onclick="event.stopPropagation();handleClick()">determine</button>
</body>
<script>
function handleClick() {
console.log("Trigger click event!");
}
</script>
If multiple elements are bound to the same js method, you can pass the element that triggers the event to the method by passing the this parameter.
<body onclick="handleClick(this)">
<button onclick="event.stopPropagation();handleClick(this)">determine</button>
</body>
<script>
function handleClick(target) {
console.log(target.nodeName + " Trigger click event!");
}
</script>
onkeydown event
window.onkeydown = function (event) {
console.log("key: " + event.key + ", code: " + event.code);
};
Example: keyboard control element position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OnKeydown event</title>
<style>
#ball { font-size: 50px; width: 50px; height: 50px; line-height: 50px; display: block; position: fixed; }
</style>
</head>
<body>
<span id="ball" style="left: 0px; top: 0px">🤷</span>
</body>
<script>
window.onkeydown = function (event) {
let x = parseInt(ball.style.left);
let y = parseInt(ball.style.top);
switch (event.key) {
case "ArrowUp": y-=5; break;
case "ArrowDown": y+=5; break;
case "ArrowLeft": x-=5; break;
case "ArrowRight": x+=5; break;
}
// Control boundary
if(x < 1) {
x = 0;
} else if (x > 500) {
x = 500;
}
if(y < 1) {
y = 0;
} else if (y > 500) {
y = 500;
}
console.log("key: " + event.key + ", code: " + event.code);
ball.style.top = y + "px";
ball.style.left = x + "px";
};
</script>
</html>
OnMouseOver, OnMouseOut and OnMouseEnter, OnMouseLeave events
- mouseenter: this event occurs when the pointer moves over the element.
- mouseleave: this event occurs when the pointer is moved off the element.
- mouseout: this event occurs when the user moves the mouse pointer out of an element or a child element within it.
- mouseover: this event occurs when the pointer moves over an element or a child element within it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OnMouseOver ,OnMouseOut And OnMouseEnter ,OnMouseLeave event</title>
<style>
body { width: 70%; margin: 0px auto; padding-top: 40px; }
.container { display: flex; justify-content: space-around; height: 50px;border: #CCC 1px solid;padding: 10px; }
.inner-container { width: 30%; line-height: 2em; text-align: center; background-color: #CCC; }
</style>
<script>
function handleEnter() { console.log("enter"); }
function handleLeave() { console.log("leave"); }
function handleOut() { console.log("out"); }
function handleOver() { console.log("over"); }
</script>
</head>
<body>
<div class="container" onmouseenter="handleEnter()" onmouseleave="handleLeave()">
<div class="inner-container">Left</div>
<div class="inner-container">right</div>
</div>
<p><b>mouseenter</b><span>This event occurs when the pointer moves over the element.</span></p>
<p><b>mouseleave</b><span>This event occurs when the pointer moves off the element.</span></p>
<hr />
<div class="container" onmouseout="handleOut()" onmouseover="handleOver()">
<div class="inner-container">Left</div>
<div class="inner-container">right</div>
</div>
<p><b>mouseout</b><span>This event occurs when the user moves the mouse pointer out of an element or a child element within it.</span></p>
<p><b>mouseover</b><span>This event occurs when the pointer moves over an element or a child element within it.</span></p>
</body>
</html>
OnMouseMove event -- [example: mouse following]
This event occurs when the mouse pointer moves.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse movement event</title>
<style>
#follower { width: 10px; height: 10px; background-color: red; border-radius: 10px; display: block; position: fixed; top: 0px; left: 0px; margin-left: -5px; margin-top: -5px; }
</style>
<script>
window.onmousemove = function (event) {
let x = event.clientX;
let y = event.clientY;
follower.style.left = x + "px"
follower.style.top = y + "px"
position.innerText = `(${x},${y})`;
}
</script>
</head>
<body>
<span id="follower"></span><label id="position"></label>
</body>
</html>
5.3. Page related events
onload event
window.onload = function (event) {
console.log("Web page loading completed!");
}
onbeforeunload event
window.onbeforeunload = function (event) {
if (window.isConformed !== true) {
// Prevent the window from closing as long as the closing is not confirmed
// When isConformed is set to true, the window can be closed
return true;
}
}
5.4. Form related events
oninput event
<input id="username" type="text" oninput="handleInput()" />
<span id="target"></span>
<script>
function handleInput() {
target.innerText = username.value;
}
</script>
focus methods and events
<input id="username" type="text" onfocus="handleFocus()"/>
<script>
window.onload = function () {
// Page loading completed. Get input focus for input box now
username.focus();
}
function handleFocus() {
console.log("The input box has obtained the input focus!");
}
</script>
onblur event
<input id="username" type="text" onblur="handleBlur()"/>
<script>
window.onload = function () {
// Page loading completed. Get input focus for input box now
username.focus();
}
function handleBlur() {
console.log("Input box lost input focus!");
}
</script>
onchange event
<select id="pick" onchange="handleSelectChange()">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<label>
<span>Remember me</span>
<input type="checkbox" id="cb" value="remember" onchange="handleCheckboxChange()" />
</label>
<script>
function handleSelectChange() {
// Gets the selected value
console.log(pick.value);
}
function handleCheckboxChange() {
// Is the judgment check box checked
console.log(cb.checked);
}
</script>
5.5. Edit event
oncopy event
Triggered when the user copies the text. If the function returns false, the copy operation is canceled.
document.oncopy = () => false;
onselectstart event
Triggered when the user selects the text. If the function returns false, the selection operation is cancelled.
document.onselectstart = () => false;
oncontextmenu event
Triggered when the user right clicks on the page. If the function returns false, the right-click operation is cancelled.
document.oncontextmenu = () => false;