Javascript - 2 事件
DOM
DOM - document object model - HTML 文档的结构化表示 由浏览器自动创建，以 树结构存储，每一个 HTML 元素（标签、内容、属性）都是一个对象
DOM允许我们使用 js 访问 HTML 元素和样式，以操作它们
- 改变文本
- 改变 HTML 属性
- 改变 CSS 样式
可以通过 js 访问和交互每一个节点
DOM 和 DOM 操作 不是js，它们是 Web API 的一部分，我们是使用 js 访问Web API 库(浏览器提供，也是js写的)
DOM 树
- DOCUMENT - DOM 的入口点
DOM 总是以 DOCUMENT 对象开头（在最顶端）
- <html> - DOCUMENT 的第一个子元素
<html> 是 HTML 文档的根元素
-
<head> <body> - <html> 的两个子元素
-
DOM树上还有 TEXT(文本)
querySelector() 方法
querySelector() 返回一个元素
'use strict';// 传入选择器（css一样的选择器）
document.querySelector('.message');
textContent 属性
返回元素的文本内容
document.querySelector('.message').textContent;
value 属性
获取 input filed 的实际值
console.log(document.querySelector('.guess').value);
事件监听器 Event Listener
事件 - 页面上发生的事
鼠标单击、鼠标移动、按键...
事件监听器 - 等待事件的发生，然后对它做出反应
处理点击事件
- 选择事件发生的元素
- 在这个元素上添加事件监听器 .addEventListener
- 在 事件监听器 中传入 事件的类型
- 指定 事件监听器 的反应（事件处理程序）
ducument.querySelector('.check').addEventListener('click',function() {console.log(document.querySelector('.guess').value);
})
Math 是js的对象
Math.random() 返回 0-1(不包括1) 的随机数; Math.trunk() 去除小数
// 秘密数字
const secretNumber = Math.trunk(Math.random()+1); // 1-20// 总分
let score = 20;// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {// 从用户界面获取的，通常是一个字符串const guess = Number(ducument.querySelector('.guess').value);// 没有有效输入if(!guess) {ducument.querySelector('.message').textContent = 'No number!';// 猜中}else if(guess === secretNumber){ducument.querySelector('.message').textContent = 'Correct number!';document.querySelector('.number').textContent = secretNumber;// 猜太大}else if(guess > secretNumber){if(score > 1){ducument.querySelector('.message').textContent = 'Too high!';score--;document.querySelector('.score').textContent = score;}else{ducument.querySelector('.message').textContent = 'You lose!';} // 猜太小}else if(guess < secretNumber){if(score > 1){ducument.querySelector('.message').textContent = 'Too low!';score--;document.querySelector('.score').textContent = score;}else{ducument.querySelector('.message').textContent = 'You lose!';} }
})
操纵CSS
style 属性
- 选择要操纵的元素
- 访问该元素的
style属性 - 选择要更改的 css属性
js中 所有有两个单词的属性名称 要使用 驼峰命名
当操纵一个 style 时，需要指定 string
// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {const guess = Number(ducument.querySelector('.guess').value);if(!guess) {ducument.querySelector('.message').textContent = 'No number!';}else if(guess === secretNumber){ducument.querySelector('.message').textContent = 'Correct number!';document.querySelector('.number').textContent = secretNumber;// 操纵背景颜色document.querySelector('body').style.backgroundColor = '#60b347';// 操纵大小document.querySelector('.number').style.width = '30rem';}else if(guess > secretNumber){if(score > 1){ducument.querySelector('.message').textContent = 'Too high!';score--;document.querySelector('.score').textContent = score;}else{ducument.querySelector('.message').textContent = 'You lose!';} }else if(guess < secretNumber){if(score > 1){ducument.querySelector('.message').textContent = 'Too low!';score--;document.querySelector('.score').textContent = score;}else{ducument.querySelector('.message').textContent = 'You lose!';} }
})
重构
重构代码，但不改变它的功能（improve code, 消灭重复代码）
// **
const displayMessage = function(message){ducument.querySelector('.message').textContent = message;
}// 猜一次数字
ducument.querySelector('.check').addEventListener('click',function() {const guess = Number(ducument.querySelector('.guess').value);if(!guess) {displayMessage('No number!');}else if(guess === secretNumber){displayMessage('Correct number!');document.querySelector('.number').textContent = secretNumber;document.querySelector('body').style.backgroundColor = '#60b347';document.querySelector('.number').style.width = '30rem';}else if(guess !== secretNumber){if(score > 1){// **displayMessage(guess > secretNumber ? 'Too high!' : 'Too high!');score--;document.querySelector('.score').textContent = score;}else{displayMessage('You lose!');} }
模态窗口 Modal Window
窗口已经存在了，我们要做的是展示它
querySelector 只会选择第一个符合的选择器，querySelectorAll 会选择全部符合的选择器
querySelectorAll 返回的一个 NodeList 对象，而不是一个真正的数组，它包含多个 DOM 元素，并且具有类似数组的索引（可以通过 NodeList[index] 访问）
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnShowModal = document.querySelectorAll('.show-modal');for(let i = 0; i<btnShowModal.length; i++)console.log(btnShowModal[i].textContent);
classList 属性
classList 属性的方法：
remove: 移除 类（不要写.）
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnShowModal = document.querySelectorAll('.show-modal');for(let i = 0; i<btnShowModal.length; i++)btnShowModal[i].addEventListener('click', function(){// 移除 hidden 类modal.classList.remove('hidden');overlay.classList.remove('hidden');});
add: 添加 类
const closeModal = function(){// 添加 hidden 类modal.classList.add('hidden');overlay.classList.add('hidden');
}
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
处理按键事件
按键事件 是 全局事件，不会发生在一个特定的元素上
// 传入事件对象
document.addEventListener('keydown', function(e){console.log(e); // KeyboardEventconsole.log(e.key);if(e.key === 'Escape'){if(!modal.classList.contains('hidden')){closeModal();}}
});
![[T.4] 团队项目：团队代码管理准备](https://img2024.cnblogs.com/blog/3611524/202504/3611524-20250401154705081-1539101818.png)
