JavaScript内容回顾第十天
内容回顾
一. 常见的事件
1.1. 鼠标事件
1.1.1. 常见的事件
-
click 当用户点击某个对象时调用的事件句柄。
-
contextmenu 在用户点击鼠标右键打开上下文菜单时触发
-
dblclick 当用户双击某个对象时调用的事件句柄。
-
mousedown 鼠标按钮被按下。
-
mouseup 鼠标按键被松开。
-
mouseover 鼠标移到某元素之上。（支持冒泡）
-
mouseout 鼠标从某元素移开。（支持冒泡）
-
mouseenter 当鼠标指针移动到元素上时触发。（不支持冒泡）
-
mouseleave 当鼠标指针移出元素时触发。（不支持冒泡）
-
mousemove 鼠标被移动
// 鼠标事件
var boxEl = document.querySelector(".box")
// boxEl.onclick = function() {
// console.log("click事件")
// }
boxEl.oncontextmenu = function(e) {
console.log("点击了右键")
// 阻止默认行为
e.preventDefault()
}
// 变量记录鼠标是否点下去
var isDown = false
boxEl.onmousedown = function() {
console.log("鼠标按下未被松开")
isDown = true
}
boxEl.onmouseup = function() {
console.log("鼠标按下已松开")
isDown = false
}
boxEl.onmousemove = function() {
if(isDown === true) {
console.log("鼠标在div上面移动")
}
}
1.1.2. mouseenter和mouseover的区别
-
mouseenter和mouseleave一组
-
不支持冒泡
-
进入子元素依然属于该元素内, 没有任何反应
-
-
mouseover和mouseout一组
-
支持冒泡
-
进入元素的子元素时
-
先调用父元素的mouseout移出
-
在调用子元素的mouseover移入
-
因为支持冒泡, 所以会将mouseover移入传递到父元素中
-
var boxEl = document.querySelector(".box")
var spanEl = document.querySelector("span")
// 第一组 不支持冒泡
// boxEl.onmouseenter = function() {
// console.log("div移入")
// }
// boxEl.onmouseleave = function() {
// console.log("di移出")
// }
// spanEl.onmouseenter = function() {
// console.log("span移入")
// }
// spanEl.onmouseleave = function() {
// console.log("span移出")
// }
// 第二组 支持冒泡
boxEl.onmouseover = function() {
console.log("div移入冒泡版")
}
boxEl.onmouseout = function() {
console.log("div移出冒泡版")
}
演练
.box {
display: flex;
width: 300px;
height: 300px;
}
.box button {
flex: 1;
height: 50px;
}
// 方案一: 监听本身就是button元素
var btnEls = document.querySelectorAll("button")
for(var btnEl of btnEls) {
btnEl.onmousemove = function(event) {
console.log(event.target.textContent)
}
}
// 方案二: 事件委托
var boxEl = document.querySelector(".box")
// mouseover可以事件委托, mouseenter不可以事件委托
boxEl.onmouseover = function (e) {
// 判断是否为button button为大写
if (e.target.tagName === "BUTTON") {
console.log(e.target.textContent)
}
}
1.2. 键盘事件
-
onkeydown 某个键盘按键被按下。
-
onkeypress 某个键盘按键被按下。
-
onkeyup 某个键盘按键被松开
-
事件的执行顺序是 onkeydown、onkeypress、onkeyup
-
down事件先发生；按下去那一刻
-
press发生在文本被输入；
-
up发生在文本输入完成；
-
我们可以通过key和code来区分按下的键：
-
code：“按键代码”（“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置。
-
key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）
区分key
- event.key/code
<input type="text">
<button>搜索button>
var inputEl = document.querySelector("input")
var btnEl = document.querySelector("button")
// inputEl.onkeydown = function() {
// console.log("keydown")
// }
// inputEl.onkeypress = function() {
// console.log("keypress")
// }
// inputEl.onkeyup = function() {
// console.log("keyup")
// }
// 用户输入的到底是什么按键
// inputEl.onkeydown = function(event) {
// console.log(event.key, event.code)
// }
// 搜索功能
btnEl.onclick = function() {
console.log(inputEl.value)
}
inputEl.onkeyup = function(event) {
if(event.code === "Enter") {
console.log(inputEl.value)
}
}
// 按下s自动获取焦点
document.onkeyup = function(e) {
// console.log("document", e.key, e.code)
if(e.code === "KeyS") {
// console.log("用户在网页中点击了s")
// 调用这个方法就获取焦点了
inputEl.focus()
}
}
1.3. 表单事件
-
onchange 该事件在表单元素的内容改变时触发( , , , 和 ) 失去焦点才触发
-
oninput 元素获取用户输入时触发
-
onfocus 元素获取焦点时触发
-
onblur 元素失去焦点时触发
-
onreset 表单重置时触发
-
onsubmit 表单提交时触发
<form action="/00_JavaScript的其他补充/01_代码风格-规范.html">
<input type="text">
<textarea name="" id="" cols="30" rows="10">textarea>
<button type="reset">重置button>
<button type="submit">提交button>
form>
// 1. 获取焦点和失去焦点
inputEl.onfocus = function() {
console.log("input获取了焦点")
}
inputEl.onblur = function() {
console.log("input失去了焦点")
}
// 2. 内容发生改变/输入内容
// 输入内容input
// 内容确定发生改变(失去焦点) change
inputEl.oninput = function() {
console.log("用户输入内容",inputEl.value)
}
inputEl.onchange = function() {
console.log("用户发生改变")
}
// reset和submit重置和提交
var formEl = document.querySelector("form")
formEl.onreset = function(e) {
console.log("用户重置")
e.preventDefault()
}
formEl.onsubmit = function(e) {
console.log("用户提交")
e.preventDefault()
}
1.4. 文档加载
- DOMContentLoaded
- HTML内容加载完毕,但是外部资源还没有加载完
- loaded
- HTML所有的内容(包括资源)
// 在上面的话修改不了hmtl元素, 上面还没有html
// var boxEl = document.querySelector(".box")
// boxEl.style.backgroundColor = "red"
// 注册事件监听
window.addEventListener("DOMContentLoaded", function () {
// 1. 这里可以操作box, box已经加载完毕
// var boxEl = document.querySelector(".box")
// boxEl.style.backgroundColor = "red"
// 2. 获取img对应图片的宽度和高度
var img = document.querySelector("img")
console.log("图片的宽度和高度", img.offsetWidth, img.offsetHeight)
})
window.onload = function () {
var boxEl = document.querySelector(".box")
boxEl.style.backgroundColor = "red"
}
补充:
resize事件: 窗口大小发生改变
window.onresize = function() {
console.log("创建大小发生改变")
}
二. window定时器
-
有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为**“计划调用（scheduling a call）”****。**
-
目前有两种方式可以实现：
-
setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
-
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
-
-
并且通常情况下有提供对应的取消方法：
- clearTimeout：取消setTimeout的定时器；
- clearInterval：取消setInterval的定时器；
-
大多数运行环境都有内置的调度程序，并且提供了这些方法：
-
目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
-
所以我们后续学习Node的时候，也可以在Node中使用它们；
-
-
setTimeout****的语法如下：
- func|code：想要执行的函数或代码字符串。
- 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
-
delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
-
arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；
- func|code：想要执行的函数或代码字符串。
-
clearTimeout****方法：
- setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，我们可以使用它来取消执行。
-
setInterval 方法和 setTimeout 的语法相同：
-
所有参数的意义也是相同的；
-
不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行；
-
-
clearInterval方法：
- setInterval也会返回一个“定时器标识符（timer identifier）”，我们可以通过clearInterval来取消这个定时器。
-
关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解
function foo(name, age, height) {
console.log('-----', name, age, height)
}
var time = setTimeout(foo, 2000 , "why", 18, 1.88)
// 取消定时器
var btn = document.querySelector(".out")
btn.onclick = function() {
clearTimeout(time)
}
// setInterval
function bar() {
console.log