web前端第三次笔记

1事件类型

html 复制代码
获取焦点事件
ipt.addEventListener("focus", () => {
    .log("")
})

失去焦点事件
ipt.addEventListener("blur", () => {
    console.log("")
})

文本输入事件
txt.addEventListener("input", () => {
    console.log("")
})

文本改变事件
txt.addEventListener("change", () => {
    console.log("")
})

鼠标移入事件
txt.addEventListener("mouseenter", () => {
    txt.style.backgroundColor = ""
})

鼠标移出事件
txt.addEventListener("mouseleave", () => {
    txt.style.backgroundColor = ""
})

键盘按下事件
txt.addEventListener("keydown", () => {
    console.log("")
})

键盘弹开事件
txt.addEventListener("keyup", (a) => {
    console.log("")
})

页面加载事件
window.addEventListener("load", function () {
    const btn = document.querySelector("button")
    btn.addEventListener("click", () => {
        console.log("")
    })
})

滚动事件  (scrollLeft 获取元素向左滚出的高度  scrollTop 获取元素向上滚出的高度)
window.addEventListener("scroll", function () {
    console.log("")
})

尺寸事件
 window.addEventListener("resize", () => {
    console.log("")
})

捕获 冒泡事件(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()
})

2阻止表单提交

html 复制代码
const btn = document.querySelector("button")
btn.addEventListener("click", function (e) {
    e.preventDefault()
})

3事件委托

html 复制代码
const ul = document.querySelector("ul")
ul.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
        e.target.style.backgroundColor = "red"
    }
})

4获取元素位置

html 复制代码
const box = document.querySelector("div")
const p = document.querySelector("p")
console.log(p.offsetTop)
console.log(p.offsetLeft)

5创建节点

html 复制代码
const btn = document.querySelector("button")
const ul = document.querySelector("ul")
btn.addEventListener("click", function () {
    const newLi = document.createElement("li")
})

6给新节点加入内容

html 复制代码
btn.addEventListener("click", function () {
    const newLi = document.createElement("li")
    newLi.innerHTML = ``
})

7追加节点到指定位置

html 复制代码
btn.addEventListener("click", function () {
    const newLi = document.createElement("li")
    newLi.innerHTML = ``
    ul.insertBefore(newLi, ul.children[0])
})

8克隆节点

html 复制代码
const li = document.querySelector("ul li")
const newli = li.cloneNode(true)
console.log(newli)

cloneNode(true) 表示克隆时将后代节点一起克隆,默认情况下为"false"

9删除节点

html 复制代码
const ul = document.querySelector("ul")
ul.removeChild(ul.children[1])

必须基于父元素进行删除

10setTimeout

html 复制代码
let timer2 = setTimeout('console.log("Hello Word")', 3000)
clearTimeout(timer2)

用来指定函数某段代码,在一定时间之后执行,返回一个整数,作为定时器的编号,以此后期清除定时器
根据定时器返回的整数清除定时器;在全局作用域下,this关键字指向window;对象中的this,默认指向对象本身;箭头函数没有this的作用域

11setInterval clearInterval

html 复制代码
let timer = setInterval(function (a, b) {
    console.log("hello word")
    console.log(a)
    console.log(b)
}, 1000, 1, 2)
console.log(timer)

每过一段时间运行一次代码

let timer = setInterval(function (a, b) {
    console.log("hello word")
    console.log(a)
    console.log(b)
}, 1000, 1, 2)
console.log(timer)
clearInterval(timer)

用来停止setInterval()方法执行的函数代码
相关推荐
m0_678693331 分钟前
深度学习笔记29-RNN实现阿尔茨海默病诊断(Pytorch)
笔记·rnn·深度学习
翻滚吧键盘6 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾10 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉18 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。25 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
sigmoidAndRELU1 小时前
读Vista
笔记·stable diffusion·世界模型
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html