web前端第三次笔记

本文主要是介绍web前端第三次笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1事件类型

获取焦点事件
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阻止表单提交

const btn = document.querySelector("button")
btn.addEventListener("click", function (e) {e.preventDefault()
})

3事件委托

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

4获取元素位置

const box = document.querySelector("div")
const p = document.querySelector("p")
console.log(p.offsetTop)
console.log(p.offsetLeft)

5创建节点

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

6给新节点加入内容

btn.addEventListener("click", function () {const newLi = document.createElement("li")newLi.innerHTML = ``
})

 7追加节点到指定位置

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

 8克隆节点

const li = document.querySelector("ul li")
const newli = li.cloneNode(true)
console.log(newli)cloneNode(true) 表示克隆时将后代节点一起克隆，默认情况下为“false”

9删除节点

const ul = document.querySelector("ul")
ul.removeChild(ul.children[1])必须基于父元素进行删除

10setTimeout

let timer2 = setTimeout('console.log("Hello Word")', 3000)
clearTimeout(timer2)用来指定函数某段代码，在一定时间之后执行，返回一个整数，作为定时器的编号，以此后期清除定时器
根据定时器返回的整数清除定时器；在全局作用域下，this关键字指向window；对象中的this，默认指向对象本身；箭头函数没有this的作用域

11setInterval  clearInterval

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()方法执行的函数代码

 

 

这篇关于web前端第三次笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---