那么好,这次主要讲解的就是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>
