HTML DOM позволяет JavaScript реагировать на события HTML. JavaScript может выполняться при возникновении события, например, когда пользователь нажимает на элемент HTML. Взаимодействие между JavaScript и HTML достигается посредством событий. События — это определенные моменты взаимодействия, которые происходят в документе или окне браузера.
Хотя ECMAScript описывает объектную модель браузера (BOM) как ядро JavaScript, на самом деле BOM является ядром разработки веб-приложений с использованием JavaScript. Спецификация предоставляет функциональные объекты браузера, независимые от веб-страниц. На протяжении многих лет спецификация разрабатывалась в условиях отсутствия спецификаций, что делало ее одновременно интересной и проблематичной. Ведь разработчики браузеров вносят в это свой вклад по своему усмотрению. Со временем общие части реализаций браузеров стали стандартами де-факто, обеспечивая основу для межбраузерного взаимодействия при веб-разработке. Часть спецификации HTML5 охватывает основное содержимое спецификации, поскольку W3C надеется стандартизировать самые основные части JavaScript в браузерах.
Оглавление
Мероприятие состоит из трех частей
Действия по выполнению события
Всплывание событий (поток событий IE)
Остановить всплывание событий event.stopPropagation()
Захват событий (потоковая передача событий Netscape)
События уровня 0 и события уровня 2
Предотвратить поведение события по умолчанию continueDefault()
События пользовательского интерфейса — UIEvent
Событие клавиатуры -- KeyboardEvent
Переход на страницу Window.open()
Прерывистые вызовы и вызовы с тайм-аутом
Мероприятие состоит из трех частей
Источник события, тип события и обработчик события также называются тремя элементами события.
1. Источник события: объект, в котором запускается событие --> объект кнопки.
2. Тип события: как его вызвать? Какое событие срабатывает? Например, щелчки мыши, нажатия клавиатуры и т. д.
3. Обработчик событий: назначение через функцию
Действия по выполнению события
1. Получите источник событий
2. Регистрация события (привязка события)
3. Добавьте обработчики событий в виде назначения функций.
Общие события:
-
когда пользователь щелкает мышью
-
Когда веб-страница загружается
-
Когда изображение загружено
-
Когда мышь наведена на элемент
-
когда поле ввода изменено
-
Когда HTML-форма отправлена
-
Когда пользователь нажимает клавишу
-
............
поток событий
Всплывание событий (поток событий IE)
Поток событий IE называется пузырьком событий, поскольку события определены для запуска, начиная с наиболее конкретного элемента (самого глубокого узла в дереве документа), а затем распространяются вверх к менее конкретным элементам (документу).
<!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>Document</title>
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
}
.center{
width: 200px;
height: 200px;
background-color: pink;
padding: 50px;
box-sizing: border-box;
}
.inner{
width: 100px;
height: 100px;
background-image: linear-gradient(to right,red,pink,blue);
}
</style>
<script>
window.onload = function(){
var outer = document.querySelector('.outer');
var center = document.querySelector('.center');
var inner = document.querySelector('.inner');
outer.onclick = function(){
console.log('我是outer');
// alert('我是outer');
console.log(event.target,'触发事件的目标源');
console.log(event.currentTarget,'当前正在执行事件的dom元素');
}
center.onclick = function(){
console.log('我是center');
// alert('我是center');
// event.stopPropagation();
console.log(event.target,'触发事件的目标源');
console.log(event.currentTarget,'当前正在执行事件的dom元素');
}
inner.onclick = function(){
console.log('我是inner');
// alert('我是inner');
// 阻止事件冒泡 event表示当前的事件对象
// console.log(event,'事件对象');
// event.stopPropagation()
console.log(event.target,'触发事件的目标源');
console.log(event.currentTarget,'当前正在执行事件的dom元素');
}
}
</script>
</head>
<body>
<!-- 事件三要素 1.事件源 2.事件类型 3.事件处理程序 -->
<!-- 事件流 描述的是页面接受事件的顺序 事件冒泡:事件由内向外触发 事件捕获:事件由外向内触发 事件流机制:事件捕获 --到达目标 --事件冒泡 -->
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
</body>
</html>
При нажатии на элемент div с идентификатором внутреннего на странице событие щелчка произойдет в следующем порядке:
div#inner-----div#center-----div#outer-----body-----html-----документ
Другими словами, элемент div#inner, то есть элемент щелчка, первым запускает событие щелчка. Затем событие щелчка проходит весь путь вверх по дереву DOM, срабатывая каждый узел, через который оно проходит, пока не достигнет объекта документа.
Остановить всплывание событий event.stopPropagation()
Захват событий (потоковая передача событий Netscape)
Команда Netscape Communicator разработала альтернативный поток событий, названный захватом событий. Захват событий означает, что наименее конкретный узел должен получить событие первым, а наиболее конкретный узел должен получить событие последним. Захват событий на самом деле заключается в перехвате событий до того, как они достигнут конечного пункта назначения. Если в предыдущем примере используется захват событий, щелчок по элементу div вызовет события щелчка в следующем порядке: document-----html ----- body ----- div
При захвате событий событие щелчка сначала фиксируется элементом документа, а затем распространяется вниз по дереву DOM, пока не достигнет фактического целевого элемента div.
<!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>Document</title>
<style>
.outer{
width: 300px;
height: 300px;
background-image: radial-gradient(red,pink,blue);
margin: 0 auto;
padding: 50px;
box-sizing: border-box;
}
.center{
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
box-sizing: border-box;
}
.inner{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script>
window.onload = function(){
var outer = document.querySelector('.outer');
var center = document.querySelector('.center');
var inner = document.querySelector('.inner');
function hander1(){
console.log('outer');
}
function hander2(){
console.log('center');
}
function hander3(){
console.log('inner');
}
/**
* false表示事件在冒泡阶段执行
* true 表示事件在捕获阶段执行
*/
outer.addEventListener('click',hander1,true);
center.addEventListener('click',hander2,true);
inner.addEventListener('click',hander3,true);
}
</script>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
</body>
</html> 
Поток событий DOM
Спецификация событий DOM2 предусматривает, что поток событий разделен на три этапа: захват события, достижение цели и всплеск событий. Перехват событий происходит первым, что дает возможность перехватить события заранее. Затем событие принимается фактическим целевым элементом. Последний этап бурлит, и на события необходимо реагировать самое позднее на этом этапе. Нажатие на элемент div вызовет события в указанном порядке.
В потоке событий DOM фактическая цель (элемент div) не получает событие на этапе захвата. Это связано с тем, что этап захвата заканчивается от документа к HTML, а затем к телу. Следующий этап, этап «достижения цели», когда событие запускается в элементе div, обычно считается частью этапа всплывания при обработке событий. Затем начинается фаза всплытия, и события распространяются обратно в документ. Большинство браузеров, поддерживающих потоковую передачу событий DOM, реализуют небольшое расширение. Хотя спецификация событий DOM2 ясно дает понять, что фаза захвата не достигает цели события, современные браузеры будут запускать события в цели события во время фазы захвата. Конечным результатом является то, что в целевом событии есть две возможности обработать это событие.
События уровня 0 и события уровня 2
<!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>Document</title>
<script>
window.onload = function(){
var btn = document.querySelector('button');
// dom 0级事件绑定 on事件类型
btn.onclick = function(){
console.log(this);
}
// 追加事件
btn.onclick = function(){
console.log('第二次事件触发');
}
// 结果看出不可追加同一类型的事件
// dom 0级事件解绑
btn.onclick = null;
// dom 2级事件绑定 addEventListener() 参数: 事件类型 事件处理程序 true捕获/false默认冒泡
// btn.addEventListener('click',function(){
// console.log(this);
// })
// // 追加事件
// btn.addEventListener('click',function(){
// console.log('第二次事件触发');
// })
var handler1 = function(){
console.log(this);
}
var handler2 = function(){
console.log('第二次事件触发');
}
btn.addEventListener('click',handler1);
btn.addEventListener('click',handler2);
// 结果看出可以追加同一类型的事件
// dom 2级事件解绑 removeEventListener() 参数: 事件类型 事件处理程序
// btn.removeEventListener('click',handler1);
}
</script>
</head>
<body>
<button>点击这里</button>
</body>
</html>Событие уровня dom0
Событие уровня dom2
Разница между событиями уровня dom0 и уровня dom2
1. Используйте ключевое слово on для привязки и отмены привязки событий на уровне dom 0 и установите для типа события значение null при отмене привязки;
2. Используйте addEventListener() для привязки событий на уровне dom 2 и RemoveEventListener() для их отмены;
3. События уровня 0 не могут быть добавлены к событиям того же типа. Добавление означает перезапись.
4. События уровня 2 Dom могут добавляться к событиям того же типа и выполняться последовательно после добавления.
Предотвратить поведение события по умолчанию continueDefault()
<!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>Document</title>
<script>
window.onload = function () {
var input = document.querySelector('input');
var a = document.querySelector('a');
// 阻止默认行为 preventDefault()
input.onclick = function () {
event.preventDefault();
}
a.onclick = function () {
event.preventDefault();
}
}
</script>
</head>
<body>
<form action="text.php">
<input type="submit" value="提交">
</form>
<a href="https://www.baidu.com">百度</a>
</body>
</html>Делегация мероприятия
В JavaScript количество обработчиков событий на странице напрямую связано с общей производительностью страницы. есть много причин. Во-первых, каждая функция является объектом и занимает место в памяти, чем больше объектов, тем хуже производительность. Во-вторых, количество посещений DOM, необходимое для данного обработчика событий, приведет к начальной задержке всего взаимодействия со страницей. Вы можете улучшить производительность страницы, просто уделив немного больше внимания использованию обработчиков событий.
Делегирование событий заключается в делегировании того, что необходимо сделать, родительскому элементу (или родительскому элементу родительского элемента) при срабатывании события. То есть: используйте принцип барботирования для добавления событий к родительскому элементу и выполняйте соответствующие операции, определяя подмножество источников событий. Использование технологии делегирования событий позволяет избежать добавления прослушивателей событий на конкретный каждый узел.
Делегирование событий использует всплытие событий, позволяя использовать только один обработчик событий для управления одним типом событий. Например, щелкните всплывающую подсказку событий, чтобы перейти к документу. Это означает, что вы можете указать обработчик событий onclick для всей страницы, а не указывать отдельные обработчики событий для каждого кликабельного элемента.
<!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>Document</title>
<script>
window.onload = function(){
var ul = document.querySelector('ul');
// 在这里加的li可以变色
// var newLi = document.createElement('li');
// newLi.innerText = '第11个li';
// ul.appendChild(newLi);
// var lis = document.querySelectorAll('li');
// for(var i=0;i<lis.length;i++){
// lis[i].onclick = function(){
// this.style.backgroundColor = 'red';
// }
// }
// 在这里加的li不可变色
var newLi = document.createElement('li');
newLi.innerText = '第11个li';
ul.appendChild(newLi);
// 事件委托,将子元素事件代理给父元素 绑定依次事件 管理一类事件
ul.onclick = function(){
// event 事件对象 event.target
event.target.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<li>第9个li</li>
<li>第10个li</li>
</ul>
</body>
</html>
Делегирование событий (прокси событий)
Используя всплытие событий, вы можете управлять событиями определенного типа, указав только один обработчик событий.
Привяжите событие дочернего элемента к родительскому элементу
Цель: оптимизировать производительность страницы, сократить количество выполнения событий, уменьшить перестановку и перекомпоновку браузера, а также привязать события к новым элементам.
тип события
События пользовательского интерфейса — UIEvent
Событие фокуса -- FocusEvent
Событие мыши --MouseEvent
<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid blue;
overflow: auto;
}
</style>
<script>
window.onload = function(){
var input = document.querySelector('input');
// select事件 在输入框中选择字符时触发
input.onselect = function(){
console.log('我被选择了');
console.log(window.getSelection().toString());
}
// resize事件 窗口缩放时触发方法
document.body.onresize = function(){
console.log(window.outerHeight,window.outerWidth);
}
// scroll事件 绑定滚动事件
var div = document.querySelector('div');
div.onscroll = function(){
console.log('正在滚动');
}
// 聚焦focus 失焦blur
input.onfocus = function(){
console.log('选中');
}
input.onblur = function(){
console.log('取消选中');
}
// 双击 dblclick
div.ondblclick = function(){
console.log('被双击');
}
// 鼠标移入mouseenter 移除mouseleave 一直移动mousemove
div.onmouseenter = function(){
console.log('鼠标移入');
}
div.onmouseleave = function(){
console.log('鼠标移出');
}
div.onmousemove = function(){
console.log('鼠标一直在移动');
}
}
</script>
</head>
<body>
<div>我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
</div>
<input type="text">
</body>
</html>
Событие клавиатуры -- KeyboardEvent
<!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>Document</title>
<script>
window.onload = function(){
var input = document.querySelector('input');
// 键盘按下事件 keydown 按键keyCode
input.onkeydown = function(){
console.log(event.keyCode);
}
// 键盘抬起事件 keyup
input.onkeyup = function(){
console.log('抬起');
}
// 键盘持续按下事件 keypress
input.onkeypress = function(){
console.log('持续按下');
}
// 输入框输入事件 获取文本输入值
input.addEventListener('textInput',function(event){
console.log(event.data);
})
}
</script>
</head>
<body>
<input type="text">
</body>
</html>
спецификация
Переход на страницу Window.open()
open открывает URL-адрес параметра страницы настраиваемый объект true открывает себя false открывает новое окно
Метод window.open() можно использовать для перехода к указанному URL-адресу или для открытия нового окна браузера. Этот метод принимает 4 параметра: URL-адрес для загрузки, целевое окно, строку атрибута и логическое значение, указывающее, должно ли новое окно заменить загруженную в данный момент страницу в истории браузера. Обычно при вызове этого метода передаются только первые три параметра, а последний параметр используется только тогда, когда не открывается новое окно.
параметр
URL-адрес
Необязательный. Открывает URL указанной страницы. Если URL-адрес не указан, откроется новое пустое окно.
имя
Необязательный. Укажите целевой атрибут или имя окна. Поддерживаются следующие значения:
-
_blank — URL-адрес загружается в новом окне. Это значение по умолчанию
-
_parent — URL-адрес, загруженный в родительский фрейм
-
_self — URL для замены текущей страницы
-
_top — замена URL для любого загружаемого набора фреймов.
-
name - имя окна
<!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>Document</title>
<script>
window.onload = function(){
var btn1 = document.querySelectorAll('button')[0];
var btn2 = document.querySelectorAll('button')[1];
btn1.onclick = function(){
// open 打开页面 参数 url name 可配置对象 true自身打开 false 新窗口打开
w = window.open('https://www.baidu.com','_blank','height = 600px,width = 600px');
// 设置新窗口的宽高 resizeTo()
w.resizeTo(400,400);
// 设置新窗口的位置 moveTo()
w.moveTo(100,100);
}
btn2.onclick = function(){
// 关闭窗口
w.close();
}
}
</script>
</head>
<body>
<button>百度页面</button>
<button>关闭页面</button>
</body>
</html>
Диалоговое окно «Система»
Используя методы alert(), Confirm() и Prompt(), вы можете позволить браузеру вызывать системное диалоговое окно для отображения сообщений пользователю. Эти диалоговые окна не имеют ничего общего с веб-страницей, отображаемой в браузере, и не содержат HTML. Их внешний вид определяется операционной системой или браузером и не может быть задан с помощью CSS. Кроме того, эти диалоговые окна являются синхронными модальными диалоговыми окнами, то есть выполнение кода прекращается при их отображении, а выполнение кода не возобновляется до тех пор, пока они не исчезнут.
тревога()
alert() получает строку, которая будет отображена пользователю. В отличие от console.log, который может получать любое количество параметров и распечатывать их все одновременно, alert() получает только один параметр. При вызове alert() переданная строка отображается в системном диалоговом окне. Диалоговое окно имеет только одну кнопку «ОК». Если параметр, переданный в alert(), не является необработанной строкой, будет вызван метод toString() значения для преобразования его в строку.
Поля предупреждений (оповещения) обычно используются для отображения пользователям сообщений, которые они не могут контролировать, например отчетов об ошибках. Единственный вариант для пользователя — закрыть окно с предупреждением после его просмотра.
подтверждать()
Окно подтверждения отображается путем вызова метода подтверждения(). Поля подтверждения похожи на окна предупреждений, поскольку оба они отображают сообщения для пользователя. Но разница в том, что в окне подтверждения есть две кнопки: «Отмена» и «ОК». Пользователи указывают, какое действие они хотят предпринять дальше, нажимая разные кнопки. Например, подтвердите("Вы уверены?");
Чтобы узнать, нажал ли пользователь кнопку «ОК» или кнопку «Отмена», вы можете определить возвращаемое значение метода подтверждения(): true означает, что была нажата кнопка «ОК», false означает, что была нажата кнопка «Отмена» или подтверждение было отключено нажатием кнопки. значок X в углу рамки.
быстрый()
Окно подсказки, отображаемое при вызове метода Prompt(). Целью окна подсказки является предложение пользователю ввести сообщение. Помимо кнопок «ОК» и «Отмена», в окне подсказки также отображается текстовое поле, в котором пользователь может ввести содержимое. Метод Prompt() получает два параметра: текст, который будет отображаться пользователю, и значение текстового поля по умолчанию (которое может быть пустой строкой). Вызовите приглашение («Как вас зовут?»). Если пользователь нажмет кнопку «ОК», Prompt() вернет значение в текстовом поле. Если пользователь нажмет кнопку «Отмена» или диалоговое окно закроется, метод Prompt() вернет значение NULL.
<!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>Document</title>
<script>
window.onload = function(){
// 弹框 alert()
alert('弹框');
// 确认框 confirm()
var res = confirm('你确定么？')
if(res){
console.log('确定');
}else{
console.log('取消');
}
// 输入框 prompt()
var res = prompt('请输入你的姓名');
console.log(res);
}
</script>
</head>
<body>
</body>
</html>
расположение
Объект местоположения — один из наиболее полезных объектов спецификации, предоставляющий информацию о документе, загруженном в текущее окно, а также предоставляющий некоторые функции навигации.
Location — это магический объект, который одновременно является объектом окна и объектом документа. После нашего сравнения мы обнаружили, что объект местоположения также можно использовать напрямую.
Атрибуты
хост возвращает имя сервера и номер порта
имя_хоста возвращает имя сервера без номера порта
href возвращает полный URL-адрес загруженной в данный момент страницы.
pathname возвращает каталог и имя файла URL-адреса.
порт возвращает номер порта, указанный в URL-адресе
протокол возвращает протокол, используемый страницей
search возвращает строку запроса URL-адреса. Эта строка начинается со знака вопроса
метод
назначать()
Передайте параметр URL-адреса, откройте новый URL-адрес и создайте запись в истории просмотров.
заменять()
Параметр представляет собой URL-адрес, который приведет к изменению местоположения браузера, но не создаст новую запись в истории.
перезагрузить()
Перезагрузить отображаемую в данный момент страницу. Параметр может иметь логический тип и по умолчанию имеет значение false, что означает перезагрузку наиболее эффективным способом, возможно, непосредственно из кеша. Если параметр имеет значение true, принудительно перезагрузите компьютер с сервера.
<!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>Document</title>
<script>
window.onload = function(){
console.log(location.href);
console.log(location.host);
console.log(location.hostname);
console.log(location.protocol);
console.log(location.port);
var btn1 = document.body.children[0];
var btn2 = document.body.children[1];
var btn3 = document.body.children[2];
btn1.onclick = function(){
// assign() 页面跳转 参数:url 会在浏览器中生成一条历史记录
location.assign('./2-测试页面.html');
}
btn2.onclick = function(){
// replace() 页面跳转 替换页面 参数:url 不会在浏览器中生成历史记录
location.replace('./2-测试页面.html')
}
btn3.onclick = function(){
// reload() 刷新页面 参数:默认是false请求缓存资源 true强制从服务器请求数据
// 小刷和大刷区别
// 小刷f5刷新文档 请求浏览器缓存资源
// 大刷 请求服务器资源
location.reload();
}
}
</script>
</head>
<body>
<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
</body>
</html>Выход свойства:
Метод прыжка
Разница заключается в том, следует ли генерировать записи истории: Assingn() может двигаться вперед и назад, а replace() — нет.
история
Этот объект сохраняет онлайн-историю пользователя. По соображениям безопасности разработчики не могут знать URL-адреса, которые просматривали пользователи. Однако по списку страниц, которые посетили пользователи, они также могут перемещаться вперед и назад, не зная фактических URL-адресов. Примечание. Для объекта «История» нет приложения. Открытый стандарт, но все браузеры поддерживают этот объект.
длина
Возвращает количество URL-адресов в списке истории. Примечание. Internet Explorer и Opera начинаются с 0, а Firefox, Chrome и Safari — с 1.
назад()
Загрузите предыдущий URL-адрес в список истории.
вперед()
Загрузите следующий URL-адрес в списке истории.
идти()
Загрузите определенную страницу в список истории. Отрицательное число означает переход назад, а положительное число означает переход вперед.
Прерывистые вызовы и вызовы с тайм-аутом
JavaScript — это однопоточный язык, но выполнение кода можно запланировать в определенное время с помощью значений таймаута и времени интервала.
setTimeout()
Этот метод возвращает числовой идентификатор, представляющий вызов таймаута. Этот идентификатор вызова таймаута является уникальным идентификатором запланированного кода выполнения, с помощью которого вызов таймаута может быть отменен. Вы можете передатьclearTimeout(ID);
параметр:
1. Код, который необходимо выполнить. 2. Время в миллисекундах.
Например, выполните оператор вывода через 1 секунду.
<script>
var id = setTimeout(() => {
console.log('Hello World');
}, 1000);
console.log(id);
// 清除超时调用
clearTimeout(id);
</script>setInterval()
Повторяет выполнение кода с указанными интервалами до тех пор, пока прерывистый вызов не будет отменен или страница не будет выгружена. Вызов этого метода также вернет идентификатор прерывистого вызова, который позволит пользователю отменить прерывистый вызов в какой-то момент в будущем.
параметр:
1. Код, который необходимо выполнить. 2. Время в миллисекундах.
Например, динамическое отображение времени
<script>
var div = document.createElement('div');
// 间歇调用
var id = setInterval(() => {
div.innerHTML = new Date().toLocaleString();
}, 1000);
document.body.appendChild(div);
// 清除计时器
clearInterval(id);
</script>