WEB前端-笔记（二）

一、事件

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)