Table of contents
1. Event Overview
HTML events can trigger actions in the browser.
2. Window events
This event is triggered by the window (also applies to the <body> tag):
| Attributes | describe |
|---|---|
| onblur | Run script when window loses focus |
| onfocus | Run script when window gets focus |
| onload | Run script after document loads |
| onresize | Run script when window is resized |
| onstorage | Run the script when the Web Storage area is updated (when the data in the storage space changes) |
2.1 Case Demonstration
1: When the window loses focus, output "Window lost focus"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
window.onblur = function () {
console.log("窗口失去焦点");
};
</script>
</body>
</html>
2: When the window gets focus, output "Window gets focus"
window.onfocus = function () {
console.log('窗口获得了焦点！');
};
3: After the window is loaded
window.onload =function () {
console.log("窗口加载完成！")
};4: When the window size changes
window.onresize = function () {
console.log("窗口大小正在发送改变");
};3. Form events
Form events are triggered in HTML forms (applicable to all HTML elements, but the HTML elements need to be within the form form):
3.1 Case demonstration
1: Change the background color when getting focus
var userCode = document.getElementById("userCode");
userCode.onfocus = function () {
this.style.backgroundColor = 'green';
};2: Change background color when focus is lost
userCode.onblur = function () {
this.style.backgroundColor = 'red';
};3: onchange content change event
var userCode = document.getElementById("userCode");
userCode.onchange = function () {
console.log(userCode.value);
};4: oninput When the content of the text box changes, the changed content will be output to the console immediately.
userCode.oninput = function () {
console.log(userCode.value);
};5: Get the form and fail to submit it
userCode.oninvalid = function () {
console.log("请您完成表单的内容!");
};6: When the text box content is selected
userCode.onselect = function () {
console.log("您已经选择了文本框!");
};7: When submitting the form, output "form submission" on the console
var myform = document.getElementById("myform");
/* 当提交表单的时候，在控制台输出“表单提交” */
myform.onsubmit = function () {
console.log("表单提交");
return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
};
4. Keyboard events
Trigger events through the keyboard, similar to user behavior:
4.1 Case demonstration
1: When the keyboard is pressed, determine whether the current key is a. If so, output true, otherwise output false.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
/* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
window.onkeydown = function (event) {
/* 解决兼容性问题 */
event = event || window.event;
if (event.keyCode == 65) {
console.log("true");
} else {
console.log("false");
}
};
</script>
</body>
</html>2: onkeyup when the button is released
window.onkeyup = function (event) {
/!* 解决兼容问题 *!/
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
};5. Mouse events
Events are triggered through the mouse, similar to user behavior:
| Properties 3.1 | describe |
|---|---|
| onclick | mouse click event |
| ondblclick | Mouse double click event |
| onmousedown | Run when mouse button pressed |
| onmouseup | when mouse button runs |
| onmousemove | Run script when mouse pointer moves |
| onmouseover | Bubbling cannot be prevented when the mouse is moved in |
| onmouseout | Cannot prevent bubbling when the mouse is moved out |
| onmouseenter | When the mouse enters the current DIV, you can prevent bubbling |
| onmouseleave | When the mouse moves out of the current DIV, you can prevent bubbling |
| onmousewheel | When the mouse wheel is running |
| onscroll | When the scrollbar of a scrolling element runs |
5.1 Case demonstration
When the mouse moves in, the mouse moves out event
var box = document.getElementById("box");
/* 当鼠标移入div，背景颜色变为红色 */
box.onmouseenter = function () {
this.style.background = "red";
};
/* 当鼠标移出div，背景颜色变为蓝色 */
box.onmouseleave = function () {
this.style.background = "skyblue";
};