我们在使用原生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('btn')btn.addEventListener('click',function(e){console.log(111)},false)demo.addEventListener('click',function(e){console.log(222)},false)document.body.addEventListener('click',function(e){console.log(333)},false)
当 分别点击 btn demo body 时候 结果如下
这种 点击内部DIV 接连出发父级DIV的点击事件 的事件 统称冒泡事件
这是因为addEventListener() 第三个参数 为false 默认为false 即冒泡事件
当把三个监听函数的布尔值改为true 又会发生捕获事件 如下
let demo = document.getElementById('demo')let btn = document.getElementById('btn')btn.addEventListener('click',function(e){console.log(111)},true)demo.addEventListener('click',function(e){console.log(222) },true)document.body.addEventListener('click',function(e){console.log(333)},true)
打印结果如下
这种事件相对于不同的情况 有不同的应用 如果我们开发过程中 想消除这情况
就需要用到默认事件了
let demo = document.getElementById('demo')let btn = document.getElementById('btn')btn.addEventListener('click',function(e){e.stopPropagation()//阻止冒泡事件console.log(111)},false)demo.addEventListener('click',function(e){console.log(222)e.stopPropagation()},false)document.body.addEventListener('click',function(e){console.log(333)e.stopPropagation()},false)
分别点击三个部分 分别打印 111 222 333
如此就是默认事件的妙用了
下面我们来研究下四个进出鼠标世家
let demo = document.getElementById('demo')demo.onmouseenter = function (){console.log('enter进') //整体 进 有子集 算在里面}demo.onmouseleave = function (){console.log('leave出')}demo.onmouseover = function (){console.log('over进') //进入子集 算作 chu }demo.onmouseout = function (){console.log('out出')}
当把鼠标从body 移到btn 内部之后 变化如下
鼠标从 body 到 demo 到 body 变化如下
比较两种结果 即可知道这两对鼠标事件的差别
在一样的 body 到 demo over out 这一对进出事件在进入 属于demo 本身内部的btn时 也属于出外部 而 enter leave 这一对 却没有这种情况
在从 body 到 demo 再出去 时 两队 对视一样的
也就是说 两对事件 不同点 就是 在进入 调用对象内部标签时 over out 会触发进出事件 也就是会识别为外部
在某些特定环境中 如果不想使用系统自带的右键选项 我们可以使用右键事件中的oncontextmenu来禁用自带的右键
demo.oncontextmenu = function (e){e.preventDefault()}
我们可以在事件中自定义一个div 取代默认事件中的选项
demo.oncontextmenu = function (e){e.preventDefault()console.log(111)let menu = document.querySelector('.menu')if(menu) menu.remove()menu = document.createElement('div')menu.classList.add('menu')document.body.append(menu)menu.style.left = e.pageX + 'px';menu.style.top = e.pageY + 'px';}
这样写 右键生成的DIV 永远存在 那么有什么方法可以消除吗？
window.onclick = function (e){let menu = document.querySelector('.menu')if( menu && !menu.contains(e.target)){menu.remove()}}
