事件类型
获取焦点事件
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()
})
阻止表单提交
const btn = document.querySelector("button")
btn.addEventListener("click", function (e) {
e.preventDefault()
})
事件委托
const ul = document.querySelector("ul")
ul.addEventListener("click", function (e) {
if (e.target.tagName === "LI") {
e.target.style.backgroundColor = "red"
}
})
获取元素位置
const box = document.querySelector("div")
const p = document.querySelector("p")
console.log(p.offsetTop)
console.log(p.offsetLeft)
创建节点
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])
})
克隆节点
const li = document.querySelector("ul li")
const newli = li.cloneNode(true)
console.log(newli)
cloneNode(true) 表示克隆时将后代节点一起克隆,默认情况下为“false”
删除节点
const ul = document.querySelector("ul")
ul.removeChild(ul.children[1])
必须基于父元素进行删除