目录
一、事件
1.1类型
1.2对象
1.3页面加载事件
1.4滚动事件
1.5尺寸事件
1.6捕获&冒泡事件
1.7阻止表单提交
1.8全选案例
1.9事件委托
编辑
1.10client&offset
1.11换取元素的位置
1.12创建节点
1.13克隆节点
1.14删除节点
1.15setTimeout
1.16setInterval
1.17clearInterval
二、原型链
一、事件
1.1类型
focus 获取焦点事件
ipt.addEventListener("focus", () => {
.log("")
})blue 失去焦点事件
ipt.addEventListener("blur", () => {
console.log("")
})inout 文本输入事件
txt.addEventListener("input", () => {
console.log("")
})change 文本改变事件
txt.addEventListener("change", () => {
console.log("")
})mouseenter 鼠标移入事件
txt.addEventListener("mouseenter", () => {
txt.style.backgroundColor = ""
})mouseleava 鼠标移出事件
txt.addEventListener("mouseleave", () => {
txt.style.backgroundColor = ""
})keydown 键盘按下事件
txt.addEventListener("keydown", () => {
console.log("")
})keyup 键盘弹开事件
txt.addEventListener("keyup", (a) => {
console.log("")
})1.2对象
帮忙记录此次事件触发的所有类型信息，包括触发哪些事件类型、按下哪些键盘按键等等
const txt = document.querySelector("textarea")
txt.addEventListener("keydown", (event) => {
console.log(event)
if (event.code == "Enter") {
console.log("")
}
})1.3页面加载事件
window.addEventListener("load", function () {
const btn = document.querySelector("button")
btn.addEventListener("click", () => {
console.log("")
})
})load 等待页面所有资源加载完毕再执行函数
1.4滚动事件
scroll 滚动；该事件一般添加于"window"、"document"、"html"
window.addEventListener("scroll", function () {
console.log("")
})scrollLeft 获取元素向左滚出的高度
window.addEventListener("scroll", function () {
console.log(document.documentElement.scrollLeft)
})scrollTop 获取元素向上滚出的高度
window.addEventListener("scroll", function () {
if (document.documentElement.scrollTop >= 1000) {
document.querySelector("div").style.display = "block"
}
document.querySelector("div").addEventListener("click", function () {
document.documentElement.scrollTop = 0
document.querySelector("div").style.display = "none"
})
})当页面滚出一定距离时，点击“div”回到顶部
1.5尺寸事件
resize
window.addEventListener("resize", () => {
console.log("")
})1.6捕获&冒泡事件
true 捕获；false 冒泡
const gf = document.querySelector(".grandFather")
const f = document.querySelector(".father")
const s = document.querySelector(".son")
gf.addEventListener("click", function (e) {
console.log("我是爷爷触发的事件")
e.stopPropagation()
})
f.addEventListener("click", function (e) {
console.log("我是爸爸触发的事件")
e.stopPropagation()
})
s.addEventListener("click", function (e) {
console.log("我是儿子触发的事件")
e.stopPropagation()
})1.7阻止表单提交
const btn = document.querySelector("button")
btn.addEventListener("click", function (e) {
e.preventDefault()
})1.8全选案例
const all_check = document.querySelector("#checkAll")
const cks = document.querySelectorAll(".ck")功能一：点击“全选”按钮，下列列表被全选
all_check.addEventListener("click", function () {
if (all_check.checked == true) {
for (let i = 0; i < cks.length; i++) {
cks[i].checked = true
}
}
else {
for (let i = 0; i < cks.length; i++) {
cks[i].checked = false
}
}
})
功能二：将下列列表全选，“全选”按钮被选择
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener("click", function () {
let num1 = document.querySelectorAll(".ck:checked")
if (num1.length == cks.length) {
all_check.checked = true
}
else {
all_check.checked = false
}
})
}
1.9事件委托
利用事件监听里的冒泡
const ul = document.querySelector("ul")
ul.addEventListener("click", function (e) {
if (e.target.tagName === "LI") {
e.target.style.backgroundColor = "red"
}
})
1.10client&offset
clientWidth/clientHeight 获取元素可视区域的宽度/高度，不包括边框、margin、滚动条
const box = document.querySelector("div")
console.log(box.clientWidth)
console.log(box.clientHeight)offsetWidth/offsetHeight 获取元素自身的宽/高，包括padding、border
console.log(box.offsetWidth)
console.log(box.offsetHeight)1.11换取元素的位置
获取元素距离自己已有定位的父级元素的左&上距离
const box = document.querySelector("div")
const p = document.querySelector("p")
console.log(p.offsetTop)
console.log(p.offsetLeft)1.12创建节点
创建节点
const btn = document.querySelector("button")
const ul = document.querySelector("ul")
btn.addEventListener("click", function () {
const newLi = document.createElement("li")
})给新创建的元素追加内容
btn.addEventListener("click", function () {
const newLi = document.createElement("li")
newLi.innerHTML = ``
})追加节点至指定位置
btn.addEventListener("click", function () {
const newLi = document.createElement("li")
newLi.innerHTML = ``
ul.insertBefore(newLi, ul.children[0])
})1.13克隆节点
cloneNode(true) 表示克隆时将后代节点一起克隆，默认情况下为“false”
const li = document.querySelector("ul li")
const newli = li.cloneNode(true)
console.log(newli)1.14删除节点
必须基于父元素进行删除
const ul = document.querySelector("ul")
ul.removeChild(ul.children[1])1.15setTimeout
主要用来指定函数某段代码，在一定时间之后执行，返回一个整数，作为定时器的编号，以此后期清除定时器
根据定时器返回的整数清除定时器
let timer2 = setTimeout('console.log("Hello Word")', 3000)
clearTimeout(timer2)在全局作用域下，this关键字指向window；对象中的this，默认指向对象本身；箭头函数没有this的作用域
1.16setInterval
每隔一定时间，执行一次代码
let timer = setInterval(function (a, b) {
console.log("hello word")
console.log(a)
console.log(b)
}, 1000, 1, 2)
console.log(timer)1.17clearInterval
用来停止setInterval()方法执行的函数代码
let timer = setInterval(function (a, b) {
console.log("hello word")
console.log(a)
console.log(b)
}, 1000, 1, 2)
console.log(timer)
clearInterval(timer)二、原型链
当访问某个对象的属性时，会先在这个对象本身属性上查找，如果没有找到，就去它的原型（_proto_）去找，即它的构造函数的prototype查找，如果没有找到，就到原型的原型去找（构造函数的prototype._proto_）。如果直到最顶层的 Object.prototype 还是找不到，是null，则返回undefined。这样一层一层的查找就会形成一个链式结构，这就是原型链。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”。所有引用类型的 _proto_都指向它的构造函数的prototype。即，整个查找过程是顺着_proto_属性，一步一步往上查找，形成像链条的结构，即，原型链。因此，在我们创建对象、数组、函数时，都自带一些属性&方法，这些属性&方法都在他们的原型上保存着，则他们自创建起，就可直接使用那些属性&方法。
