[轉(zhuǎn)帖]玩轉(zhuǎn)js事件機制
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
js事件機制正文首先，我們要知道js事件流的概念。 一、js事件流js事件流一共分為
來張圖讓你更好的理解： 二、舉個例子我們要實現(xiàn)這個效果，定義三個容器，給三個容器都添加一個點擊監(jiān)聽事件，點擊相應(yīng)的容器并輸出相應(yīng)的打印。我們需要觀察的是點擊相應(yīng)的容器的輸出結(jié)果。 1.第一種情況當(dāng) 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #greenBox{ width: 200px; height: 200px; background: #c2f5ca; } #pinkBox{ width: 100px; height: 100px; background-color: #f7d0d0; color:#fff; position: absolute; } #blackBox{ width: 50px; height: 50px; background: #000; } </style>
</head> <body> <div id="greenBox"> <div id="pinkBox"> <div id="blackBox"></div> </div> </div>
<script> let greenBox=document.getElementById('greenBox') let pinkBox=document.getElementById('pinkBox') let blackBox=document.getElementById('blackBox') greenBox.addEventListener('click',()=>{ console.log('greenBox') }) pinkBox.addEventListener('click',(event)=>{ console.log('pinkBox') }) blackBox.addEventListener('click',(event)=>{ console.log('blackBox') }) </script> </body> </html> 當(dāng)我們點擊
2.第二種情況當(dāng)addEventListener監(jiān)聽事件有 1）我們在greenBox的監(jiān)聽事件中添加第三個參數(shù)true，代碼如下：
<script> greenBox.addEventListener('click',()=>{ console.log('greenBox') },true) pinkBox.addEventListener('click',(event)=>{ console.log('pinkBox') }) blackBox.addEventListener('click',(event)=>{ console.log('blackBox') }) </script> 當(dāng)我們點擊黑色容器時，得到的打印結(jié)果：
2）我們在greenBox的監(jiān)聽事件中添加第三個參數(shù)false，在pinkBox的監(jiān)聽事件中添加第三個參數(shù)true，代碼如下： <script> greenBox.addEventListener('click',()=>{ console.log('greenBox') },flase) pinkBox.addEventListener('click',(event)=>{ console.log('pinkBox') },true) blackBox.addEventListener('click',(event)=>{ console.log('blackBox') }) </script> 當(dāng)我們點擊黑色容器時，得到的打印結(jié)果： 這個結(jié)果也是在意料之中的，首先pinkBox在遇到注冊的的捕獲事件觸發(fā)，而blackBox默認(rèn)在遇到注冊的的冒泡事件觸發(fā)，greenBox在遇到注冊的的冒泡事件觸發(fā)。 三、阻止默認(rèn)事件當(dāng)我們想只觸發(fā)其中的
四、事件代理
1.來個例子我們要實現(xiàn)一個列表，其中有五項，點擊任何一項輸出相應(yīng)的列表項文本。 我們大多數(shù)小白會這么寫，采用循環(huán)進行遍歷： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> li { width: 100px; background: #efe5ad; font-size: 20px; margin: 10px; } </style> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> let li = document.getElementsByTagName("li"); for (let i = 0; i < li.length; i++) { li[i].addEventListener("click", () => { console.log(li[i].innerHTML) }) } </script> </body> </html> 但是這樣做每次循環(huán)都需要創(chuàng)建一個監(jiān)聽事件，這就不優(yōu)雅了，試著利用js事件流來優(yōu)化它一下吧！ <script> //事件代理 let ul = document.getElementById("ul"); ul.addEventListener("click", (event) => { console.log(event.target.innerHTML); }) </script> 我們只需要獲取ul的dom結(jié)構(gòu)，調(diào)用ul監(jiān)聽事件參數(shù)event中的taget中的innerHTML就可以得到值啦！ 2.優(yōu)點
最后我們開頭的問題想必大家都有答案了，是因為在菜品這個div中默認(rèn)設(shè)置了阻止默認(rèn)事件的函數(shù)stopPropagation()，當(dāng)點擊按鈕時只會觸發(fā)這個按鈕的冒泡事件。故點擊按鈕并不會跳轉(zhuǎn)到這個菜品的詳情頁。 ------------------------------- https://juejin.cn/post/7232905822279204919 該文章在 2023/5/18 8:44:09 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
