间歇函数setInterval、定时器、阅读间歇事件（按钮60秒后才能使用）、事件监听(绑定)addEventListener、事件类型、焦点事件、键盘事件focus、环境对象This、回调函数
定时器
每个定时器都是独一无二的
作用：每隔一段时间调用这个函数
间隔的单位是毫秒
两种写法：
注意事项：
阅读间歇事件
<body>
<textarea name="" id="" cols="30" rows="10">
16543458151634651521644515321364683431346843843
textarea>
<br>
<button class="btn">OK(5)button>
<script>
//获取元素
const btn = document.querySelector('.btn')
//倒计时
let i = 5
//开启定时器
let n = setInterval(function () {
i--
//button按钮特殊，用innerHTML
btn.innerHTML = `OK(${i})`
if (i === 0){
clearInterval(n) // 关闭定时器
//定时器停了 我就可以开按钮了
btn.disabled = false
btn.innerHTML = '同意'
}
}, 1000)
script>
body>
事件监听(绑定)
<body>
<button>点击button>
<script>
//需求：点击按钮 弹出一个对话框
//事件源： 按钮 获取
//事件类型： 点击鼠标
//事件处理程序 ： 弹出对话框
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
alert('111')
} )
script>
body>
事件类型
在JS中，有很多不同的事件类型可供监听，以下是常见的事件类型：
click：用户单击了某个元素。
dblclick：用户双击了某个元素。
mousedown：用户按下了鼠标按钮。
mouseup：用户释放了鼠标按钮。
mousemove：用户移动了鼠标。
mouseover：鼠标移到某个元素上。
mouseout：鼠标从某个元素移开。
keydown：用户按下了键盘上的某个键。
keyup：用户释放了键盘上的某个键。
focus：某个元素获得了焦点。
blur：某个元素失去了焦点。
load：某个元素完成加载。
unload：某个元素被卸载。
事件监听基本概念：
element.addEventListener(event, function, useCapture);
element指的是要监听的HTML元素
event指的是要监听的事件类型
function指的是在事件发生时要执行的函数
useCapture是一个可选的布尔值，用于指定事件是否在捕获阶段处理
<button id="myButton">Click me!button>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
使用getElementById()方法获取了ID为myButton的按钮元素，并使用addEventListener()方法在其上添加了一个点击事件监听器。当用户点击该按钮时，会弹出一个警告框，显示"Button clicked!"。
焦点事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('focus', function () {
console.log('有焦点');
})
input.addEventListener('blur', function () {
console.log('失去焦点');
})
script>
body>
html>
键盘事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
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>
文本事件
环境对象This
作用：弄清楚this指向，可以让我们代码更简洁
<body>
<button>点击button>
<script>
// //每个函数里面都有this 环境对象 普通函数里面的this指向的是window
// function fn (){
// console.log(this);
// }
// window.fn()//window对象
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
console.log(this);//btn对象
})
script>
body>
谁调用，this就指向谁
回调函数
