原生js之dom如何进行事件监听(事件捕获/冒泡)
那么好,这次主要讲解的就是dom是如何进行事件监听和事件取消监听的,我们知道vue中主要用watch来进行监听.
js监听与取消监听
那么原生js主要用到的就是addListenEvent事件来进行监听,可以监听文档dom对象也可以监听浏览器bom对象,监听事件的语法结构如下
Dom/Bom监听
element.addListentEvent(事件类型,调用函数名/function(){},事件捕获/事件冒泡(boolean)(可选))
Dom/Bom取消监听
element.removeEventListener(事件类型,调用函数名/function(){},事件捕获/事件冒泡(boolean)(可选))
简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="listen">
未点击
</div>
<div id="resizes">
</div>
<div id="remove">
移除之
</div>
<script>
document.getElementById('listen').addEventListener('click',function () {
document.getElementById('listen').innerHTML='已点击'
})
document.getElementById('listen').addEventListener('click',function(){
document.getElementById('listen').innerHTML='二次点击'
})
document.getElementById("listen").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("listen").innerHTML = Date();
}
// 调整窗口大小
window.addEventListener('resize',function(){
document.getElementById('resizes').innerHTML=Math.random()
})
// 移除事件元素
document.getElementById('remove').addEventListener('click',function(){
document.getElementById('listen').removeEventListener('click',displayDate)
})
</script>
</body>
</html>
在上述案例中,我们在id为listen的div中,加上了点击的监听事件,那么同时加上两个 不同的函数和一个displaydata方法,那么这三个方法之间是不冲突的,但例如innerHTML属性,用法是替换id的内容,是根据方法的先后调用来进行对应的替换,其实第一个函数中的替换也成功了,但是被第二个函数又替换了.所以正常来说,只要两个函数没有互相冲突的语句,它们是不会互相覆盖的.
同时我们在id为resizes的div中定义了一个window也就是bom的事件监听,只要我们更改的窗口的尺寸,就在第二个div中加一个随机数的内容.
我们在id为remove中的div中,定义了一个移除监听事件的方法,也是点击事件,点击后方法displaydata就不会和第一个listen的div发生关系了.
为什么我们在上述代码中没有用到监听语法格式的第三个布尔值,事件捕获/事件冒泡,那么好,接下来我们就来讲讲什么是事件捕获和事件冒泡,它俩的区别是什么,我们应该在什么时候要使用这个布尔值.
事件捕获和事件冒泡
众所周知,DOM的中文意思就是文档对象,那么在下面代码中,我们知道html head meta body div等元素分别是一个个文档对象,那么文档对象之间有上下级关系,就比如,head的父元素就是html,id为son的div的父元素就是id为father的div
那么我们考虑一个问题
如果id为son的div在id为father的div中,我们给它俩分别设置了两个监听事件,会先调用哪个后调用哪个?
答:先调用id为son的div,再调用id为father的div.
如何实现这个效果呢?
答:从最精确的对象id来进行调用监听事件,再向父元素查找是否有监听事件,一层一层向外去扩展,最后到window对象,就是为什么先调用子元素,后调用父元素的原因,也是事件冒泡的基本原理.
那如果说我们想在点击子元素时,先调用父元素后调用子元素时,那么我们可以考虑用事件捕获来进行进一步的调用,原理:从最外层的window->document->body->div(father)->div(son),也就是从最不精确的对象开始调用,最后的终点才是精确的对象.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="father">
<div id="son">1</div>
</div>
</body>
</html>
因为在最开始的实例中我们就想用事件冒泡来进行监听,而默认的就是事件冒泡,所以我们并不需要进行第三个参数填写,那么如果我们想用事件捕获来进行监听,则需要使用第三个参数为true来进行调用.接下来是事件捕获的实例代码,
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father{
width:300px;
height:300px;
border:1px solid gray;
position: relative;
}
#son{
width:100px;
height:100px;
border:1px solid gray;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="father">
<div id="son">1</div>
</div>
<script>
document.getElementById('son').addEventListener('click',function(){
document.getElementById('son').style.backgroundColor="green"
console.log("son")
},true)
document.getElementById('father').addEventListener('click',function(){
document.getElementById('father').style.backgroundColor='blue'
console.log("father")
},true)
</script>
</body>
</html>