(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)
Table of contents
2 Common properties of event objects
Event listener (binding)
What is an event?Events are actions or things that happen within the system while programmingFor example, when a user clicks a button on a web pageWhat is event monitoring?It is to let the program detect whether an event is generated, and once an event is triggered, it will immediately call a function to respond, also known as a binding event or a registration eventFor example, the mouse passes to display the drop-down menu, such as clicking to play the carousel, etc.
grammar:
Three elements of event monitoring :Event source: the dom element is triggered by the event, to get the dom elementEvent type: what method is used to trigger, such as mouse click, mouseover, etc.The function called by the event: what to do
Notice:1. The event type should be quoted2. The function is executed after clicking, every timeevery click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
//1.需求：点击按钮，弹出对话框
//2.事件源 按钮
//3.事件类型 点击鼠标 click字符串
const btn = document.querySelector('button')
btn.addEventListener('click',function()
{
alert('加油')
})
</script>
</body>
</html>The web page appears as:
event type
mouse event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div=document.querySelector('div')
div.addEventListener('mouseenter',function()
{
alert('来了？')
})
div.addEventListener('mouseleave',function()
{
alert('走了？')
})
</script>
</body>
</html>focus event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('focus',function()
{
console.log('来啦？')
})
input.addEventListener('blur',function()
{
console.log('走啦？')
})
</script>
</body>
</html>keyboard events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keydown',function()
{
console.log('来啦？')
})
input.addEventListener('keyup',function()
{
console.log('走啦？')
})
</script>
</body>
</html>text event
<!--
需求：用户输入文字，可以计算用户输入的字数
分析：
①：判断用输入事件 input
②：不断取得文本框里面的字符长度, 文本域.value.length
③：把获得数字给下面文本框
-->
<!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>评论回车发布</title>
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">清风徐来</p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
tx.addEventListener('focus',function()
{
total.style.opacity = 1
})
tx.addEventListener('blur',function()
{
total.style.opacity = 0
})
//检测用户输入个数
tx.addEventListener('input',function()
{
total.innerHTML=`${tx.value.length}/200字`
})
</script>
</body>
</html>The web page appears as:
event object
1 Get the event object
What is the event objectIt is also an object, which contains relevant information when the event is triggeredFor example: in the mouse click event, the event object stores information such as where the mouse is clickedscenes to be usedCan determine which key the user presses, such as pressing the Enter key to publish newsYou can judge which element the mouse clicked on, so as to do the corresponding operationSyntax: how to getThe first parameter of the callback function bound to the event is the event objectGenerally named event, ev, e
2 Common properties of event objects
Some common attributestypeGet the current event typeclientX/clientYGet the position of the cursor relative to the upper left corner of the visible window of the browseroffsetX/offsetYGet the position of the cursor relative to the upper left corner of the current DOM elementkeyThe value of the keyboard key pressed by the userThe use of keyCode is now deprecated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keyup',function(e)
{
if(e.key==='Enter')
{
alert('按下回车键')
}
})
</script>
</body>
</html>The web page appears as:
environment object
Environment object: refers to the special variable this inside the function , which represents the environment in which the current function is runningFunction: Figure out the direction of this, which can make our code more conciseThe way the function is called is different, and the object referred to by this is also different[Who calls, this is who] is a rough rule for judging what this points toCalling the function directly is actually equivalent to the window. function, so this refers to window
Callback
If function A is passed as a parameter to function B, we call function A a callback functionSimple understanding: When a function is passed as a parameter to another function, this function is a callback functionCommon usage scenarios