我们在使用原生JS 操作DOM 会遇到各种各样的问题 如何去解决他们 就需要一些经验了
当我们在html 中 定义一个DIV 命名为 #demo 时
给它写出两个一摸一样的点击事件时候 会发生覆盖事件 如图
let demo = document.getElementById('demo')
demo.onclick = function (){
console.log(111)
}
demo.onclick = function (){
console.log(222)
}
打印结果为2222222
这是因为JS 在解析同一个onclick 事件时 会将后面的事件覆盖掉前一个事件 所以会打印 “2222”
那么怎么解决这个事情呢 这就用到我们的addEventListener()
let demo = document.getElementById('demo')
demo.addEventListener('click',function(e){
console.log(111)
},false)
demo.addEventListener('click',function(e){
console.log(222)
},false)
如此 两者都会打印
既然说到 addEventListener() 事件 此函数 有三个参数 “监听的函数名” funciton(){} 布尔值 (true 为捕获 从外到内 反之为冒泡 从内到外)
当在demo 内部 再声明个 宽高 小于其本身的 DIV 外部 给 BODY 添加事件监听器 点击里面的Btn 又会怎样呢
let demo = document.getElementById('demo')
let btn = document.getElementById('