持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第8天,点击查看活动详情
给这些元素或者window窗口来绑定事件的处理程序,来对事件进行监听。
function divClick() {
console.log("div元素被点击2")
}
const divEl = document.querySelector(".box")
// DOM0
divEl.onclick = function() {
console.log("div元素被点击3")
}
// DOM2
divEl.addEventListener("click", () => {
console.log("div元素被点击4")
})
divEl.addEventListener("click", () => {
console.log("div元素被点击5")
})
divEl.addEventListener("click", () => {
console.log("div元素被点击6")
})
<body>
<div class="box">
<span class="span">我是span元素<span>
</div>
</body>
document.body.addEventListener("click",()=>{
console.log("body被点击")
})
const divEl = document.querySelector(".box")
const spanEl = document.querySelector(".span")
divEl.addEventListener("click",()=>{
console.log("div被点击了")
})
spanEl.addEventListener("click",()=>{
console.log("span被点击了")
})
我们发现点击span 打印span被点击,div被点击,body被点击 点击div 打印div被点击,body被点击
addEventListener第三个参数默认为false,表示不捕获,可以手动传入true
document.body.addEventListener("click",()=>{
console.log("body被点击")
},true)
如果我们同时有事件冒泡和时间捕获的监听,那么会优先监听到事件捕获的:
const spanEl = document.querySelector(".span")
const divEl = document.querySelector(".div")
spanEl.addEventListener("click", () => {
console.log("事件冒泡:span元素被点击了")
})
divEl.addEventListener("click", () => {
console.log("事件冒泡:div元素被点击了")
})
document.body.addEventListener("click", () => {
console.log("事件冒泡:body元素被点击了")
})
// 再次监听
spanEl.addEventListener("click", (event) => {
console.log("事件捕获:span元素被点击了")
event.stopPropagation()
}, true)
divEl.addEventListener("click", () => {
console.log("事件捕获:div元素被点击了")
}, true)
document.body.addEventListener("click", (event) => {
console.log("事件捕获:body元素被点击了")
}, true)
点击spandom 输出应该是:
事件捕获:body元素被点击了
事件捕获:div元素被点击了
事件捕获:span元素被点击了
事件冒泡:span元素被点击了
事件冒泡:span元素被点击了
事件冒泡:body元素被点击了
const spanEl = document.querySelector(".span")
spanEl.addEventListener("click", (event) => {
console.log("span元素被点击:", event)
console.log("事件的类型:", event.type)
console.log("事件的元素:", event.target, event.currentTarget)
console.log("事件发生的位置:", event.offsetX, event.offsetY)
})
const divEl = document.querySelector(".container")
divEl.addEventListener("click", (event) => {
console.log("div元素被点击:", event.target, event.currentTarget)
})
// 常见的方法
// preventDefault
//取消事件的默认行为 ,比如a标签就是默认跳转
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
event.preventDefault()
})
// stopPropagation
// 组织事件进一步传递,其实就是取消冒泡
const aEl = document.querySelector("a")
aEl.addEventListener("click", (event) => {
event.stopPropagation()
})
最后,这是我第一次参加更文活动,茫茫人海中,如果有幸遇到你,读到我这篇文章,那真是太好了。我深知还有很多不足,希望大家能多提建议,还是想舔着脸皮,向屏幕前的大帅比们,大漂亮们,恳请一个小小的点赞,这会是对我莫大鼓励。也祝愿点赞的大帅比们,大漂亮们升职加薪走向人生巅峰!