WEB笔记整理(三)

一、事件

1.1类型

focus        获取焦点事件

ipt.addEventListener("focus", () => {
            console.log("获取焦点啦")
        })

blur        失去焦点事件

ipt.addEventListener("blur", () => {
    console.log("")
})

input  输入事件

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 == "a") {
                console.log("你按下了回车键")
            }
        })

1.3页面加载事件

        // console.log(btn)   load  等待所有资源加载完毕
        window.addEventListener("load", function () {
            const btn = document.querySelector("button")

            btn.addEventListener("click", () => {
                console.log("点击了按钮")
            })
        })

1.4滚动事件

// scroll  滚动事件
        // window\document\html
        window.addEventListener("scroll", function () {
            console.log("11")
            // scrollTop\scrollLeft  获取元素向上滚出的高度，向左滚出的宽度
            console.log(document.documentElement.scrollTop >= 1000)
            // console.log(document.documentElement.scrollLeft)
            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"

            })


        })

1.5尺寸事件

 window.addEventListener("resize", () => {
            console.log("页面大小改")
        })

1.6捕获&冒泡事件

 const gf = document.querySelector(".grandFather")
        const f = document.querySelector(".father")
        const s = document.querySelector(".son")


        gf.addEventListener("click", function (e) {
            console.log("我是爷爷触发的事件")
            e.stopPropagation()
        })
        // true  捕获
        // false   冒泡   默认的参数值

        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")


        // console.log(cks)
        // console.log(all_check)
        // 功能1 如果全选按钮是选中的，下边的全部选中，反之，则群补取消选中
        all_check.addEventListener("click", function () {
            // 当前按钮的选中状态
            // console.log(all_check.checked)
            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")
                // console.log(num1)
                if (num1.length == cks.length) {
                    all_check.checked = true
                } else {
                    all_check.checked = false

                }
            })
        }


        localStorage.setItem("name", "zhangsan ")

 

1.9事件委托

利用事件监听里的冒泡

const ul = document.querySelector("ul")
        // 利用事件监听中的冒泡
        ul.addEventListener("click", function (e) {
            // console.log("333")
            // console.log(e.target)   //e.target获取的就是我们点击的那个对象
            // e.target.style.backgroundColor = "red"
            console.log(e.target.tagName)
            if (e.target.tagName === "LI") {
                e.target.style.backgroundColor = "red"

            }
        })

1.10client&offset 

<script>
        const box = document.querySelector("div")
        // clientWidth  元素可视区域的宽度，不包含边框、margin、滚动条
        console.log(box.clientWidth)
        console.log(box.clientHeight)
        console.log(box.offsetWidth)//获取元素自身的宽高，包含padding、border
        console.log(box.offsetHeight)//获取元素自身的宽高，包含padding、border
</script>

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克隆节点

<script>
        // 元素对象.cloneNode(布尔值)
        const li = document.querySelector("ul li")
        const newli = li.cloneNode(true)

        // true表示克隆的时候会将后代节点一起进行克隆
        // 默认情况下是false
        console.log(newli)

    </script>

1.14删除节点

<script>
        const ul = document.querySelector("ul")
        // 删除的操作必须基于父元素进行删除
        ul.removeChild(ul.children[1])

    </script>

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)

二、原型链