咨詢公司起名用字大全寧波seo關鍵詞培訓
那么好,這次主要講解的就是dom是如何進行事件監(jiān)聽和事件取消監(jiān)聽的,我們知道vue中主要用watch來進行監(jiān)聽.
js監(jiān)聽與取消監(jiān)聽
那么原生js主要用到的就是addListenEvent事件來進行監(jiān)聽,可以監(jiān)聽文檔dom對象也可以監(jiān)聽瀏覽器bom對象,監(jiān)聽事件的語法結構如下
Dom/Bom監(jiān)聽
element.addListentEvent(事件類型,調(diào)用函數(shù)名/function(){},事件捕獲/事件冒泡(boolean)(可選))
Dom/Bom取消監(jiān)聽
element.removeEventListener(事件類型,調(diào)用函數(shù)名/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();}// 調(diào)整窗口大小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中,加上了點擊的監(jiān)聽事件,那么同時加上兩個 不同的函數(shù)和一個displaydata方法,那么這三個方法之間是不沖突的,但例如innerHTML屬性,用法是替換id的內(nèi)容,是根據(jù)方法的先后調(diào)用來進行對應的替換,其實第一個函數(shù)中的替換也成功了,但是被第二個函數(shù)又替換了.所以正常來說,只要兩個函數(shù)沒有互相沖突的語句,它們是不會互相覆蓋的.
同時我們在id為resizes的div中定義了一個window也就是bom的事件監(jiān)聽,只要我們更改的窗口的尺寸,就在第二個div中加一個隨機數(shù)的內(nèi)容.
我們在id為remove中的div中,定義了一個移除監(jiān)聽事件的方法,也是點擊事件,點擊后方法displaydata就不會和第一個listen的div發(fā)生關系了.
為什么我們在上述代碼中沒有用到監(jiān)聽語法格式的第三個布爾值,事件捕獲/事件冒泡,那么好,接下來我們就來講講什么是事件捕獲和事件冒泡,它倆的區(qū)別是什么,我們應該在什么時候要使用這個布爾值.
事件捕獲和事件冒泡
眾所周知,DOM的中文意思就是文檔對象,那么在下面代碼中,我們知道html head meta body div等元素分別是一個個文檔對象,那么文檔對象之間有上下級關系,就比如,head的父元素就是html,id為son的div的父元素就是id為father的div
那么我們考慮一個問題
如果id為son的div在id為father的div中,我們給它倆分別設置了兩個監(jiān)聽事件,會先調(diào)用哪個后調(diào)用哪個?
答:先調(diào)用id為son的div,再調(diào)用id為father的div.
如何實現(xiàn)這個效果呢?
答:從最精確的對象id來進行調(diào)用監(jiān)聽事件,再向父元素查找是否有監(jiān)聽事件,一層一層向外去擴展,最后到window對象,就是為什么先調(diào)用子元素,后調(diào)用父元素的原因,也是事件冒泡的基本原理.
那如果說我們想在點擊子元素時,先調(diào)用父元素后調(diào)用子元素時,那么我們可以考慮用事件捕獲來進行進一步的調(diào)用,原理:從最外層的window->document->body->div(father)->div(son),也就是從最不精確的對象開始調(diào)用,最后的終點才是精確的對象.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="father"><div id="son">1</div></div></body>
</html>
因為在最開始的實例中我們就想用事件冒泡來進行監(jiān)聽,而默認的就是事件冒泡,所以我們并不需要進行第三個參數(shù)填寫,那么如果我們想用事件捕獲來進行監(jiān)聽,則需要使用第三個參數(shù)為true來進行調(diào)用.接下來是事件捕獲的實例代碼,
實例:
<!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>