當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript举例介绍事件委托的典型使用场景
生活随笔
收集整理的這篇文章主要介紹了
javascript举例介绍事件委托的典型使用场景
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在了解什么是DOM事件以及給DOM事件綁定監(jiān)聽器的幾種方法后，我們來談談事件委托。1. e.target 和 e.currentTarget當我們給目標元素target 綁定一個事件監(jiān)聽器target.addEventListener(event,function(){}), 并指定回調函數(shù)function(e), 函數(shù)的參數(shù)e表示事件。此時e.target 與 e.currentTarget分別表示自己觸發(fā)事件的元素與被監(jiān)聽的元素<html>
<body>
<ul style='list-style:none;max-width:200px;border:1px solid;'><li>點我試試</li>
<ul>
<script>(document.querySelector('ul')).addEventListener('click' ,function(e){console.log('e.target')console.log(e.target)console.log('e.currentTarget')console.log(e.currentTarget)})</script>
</body>
</html>
x1<html>2<body>3<ul style='list-style:none;max-width:200px;border:1px solid;'>4 ?<li>點我試試</li>5<ul>6<script>7 (document.querySelector('ul')).addEventListener('click' ,function(e){8 ? ?console.log('e.target')9 ? ?console.log(e.target)10 ? ?console.log('e.currentTarget')11 ? ?console.log(e.currentTarget)12 })13 ?</script>14</body>15</html>16這段代碼為一個ul元素綁定了一個監(jiān)聽器，當ul上發(fā)生點擊事件時，分別輸出e.target和e.currentTarget的值。
當點擊ul中的li元素時，該段代碼的在控制臺輸出的結果如下：
此時，e.target為直接點擊的元素li，而e.currentTarget為被監(jiān)聽的元素ul。由此我們可以得到一個啟發(fā)，觸發(fā)事件的元素與被監(jiān)聽的元素不一定是一個元素。于是就來到了本文的重點內(nèi)容——事件委托。
2. 如何進行事件委托什么情況下回用到事件委托呢?舉兩個例子1） 當存在多個元素可以共用同一個監(jiān)聽器<body> <ul><li>點<span>這里</span></li><li>點這里</li> </ul> <style>ul, li{list-style:none;border:1px solid;padding:10px;background:#ddd } li{text-align:center;margin:10px;background:#fff } </style> </body> </html> x1<body>2<ul>3 ?<li>點<span>這里</span></li>4 ?<li>點這里</li>5</ul>6<style>7 ?ul, li{8 ?list-style:none;9 ?border:1px solid;10 ?padding:10px;11 ?background:#ddd12}13li{14 ?text-align:center;15 ?margin:10px;16 ?background:#fff17}18</style>19</body>20</html>21上面的代碼中定義了如圖所示的一個ul，它包裹著兩個li，第一個li中還有一個子元素span。如果我們希望點擊兩個li均執(zhí)行同一條命令時，第一種方法是為每個li都綁定一個監(jiān)聽器，但當li很多時，這樣處理就過于繁瑣。
這時我們會想到可以直接監(jiān)聽ul，為ul綁定事件函數(shù)，那么只要li存在于ul的內(nèi)部，點擊任意的一個li都會執(zhí)行這條命令。但同樣存在一個問題，當點擊li的外部，也就是圖中的灰色區(qū)域時，命令同樣會被執(zhí)行。
那么如何僅僅在點擊li的覆蓋區(qū)域的時候才執(zhí)行這段命令呢，可以用以下這段代碼。
var ul=document.querySelector('ul') ul.addEventListener('click',function(e){var el = e.target //判斷當前點擊的元素是否為li，如果不是，執(zhí)行以下的while循環(huán)while(el.tagName !== 'LI'){ //如果點擊的元素為ul，直接跳出循環(huán)if(el === ul){el = nullbreak;} //否則，將當前元素父元素賦給elel=el.parentNode} //如果最后el不為null，則打出'ok'if(el){console.log('ok')} //否則，打出'你點擊的不是li'else console.log('你點擊的不是li') }) x1var ul=document.querySelector('ul')2ul.addEventListener('click',function(e){3 ?var el = e.target4//判斷當前點擊的元素是否為li，如果不是，執(zhí)行以下的while循環(huán)5 ?while(el.tagName !== 'LI'){6//如果點擊的元素為ul，直接跳出循環(huán)7 ? ?if(el === ul){8 ? ? ?el = null9 ? ? ?break;10 ? }11//否則，將當前元素父元素賦給el12 ? ? ?el=el.parentNode13 }14//如果最后el不為null，則打出'ok'15 ?if(el){16 ? ?console.log('ok')17 }18//否則，打出'你點擊的不是li'19 ?else console.log('你點擊的不是li')20})21這段代碼實現(xiàn)了當點擊的區(qū)域在li范圍內(nèi)時，不管點擊的是li元素本身，還是li的子元素span，都會執(zhí)行console.log('ok')，但當點擊區(qū)域超出li的范圍，則執(zhí)行' console.log('你點擊的不是li')'。這就成功實現(xiàn)了一個事件委托。
（2） 用事件委托實現(xiàn)動態(tài)監(jiān)控
還有一種情況，也會用到事件委托，那就是需要動態(tài)監(jiān)控的時候。
看以下代碼：
<html> <body> <ul><li>1</li><li>2</li><li>3</li><li>4</li> </ul><button id=addButton>+</button> </body> </html> <style> li{border: 1px solid; } </style> <script> addButton.onclick = function(){var li = document.createElement('li')li.textContent = 'new' document.querySelector('ul').appendChild(li) } document.querySelector('ul').onclick = function(e){console.log(e.target) } </script> </body> </html> x1<html>2<body>3<ul>4 ?<li>1</li>5 ?<li>2</li>6 ?<li>3</li>7 ?<li>4</li>8</ul>9 ?<button id=addButton>+</button>10</body>11</html>12<style>13li{14 ?border: 1px solid;15}16</style>17<script>18addButton.onclick = function(){19 ?var li = document.createElement('li')20 ?li.textContent = 'new' 21 ?document.querySelector('ul').appendChild(li)22}23document.querySelector('ul').onclick = function(e){24 ?console.log(e.target)25}26</script>27</body>28</html>29這段代碼實現(xiàn)的效果如下：
當點擊左下角的加號按鈕時，會增加一個新的li，同時在點擊li時，在控制臺輸出被點擊的li的內(nèi)容。這就是用事件委托實現(xiàn)動態(tài)監(jiān)控。
來自為知筆記(Wiz)
當點擊ul中的li元素時，該段代碼的在控制臺輸出的結果如下：
此時，e.target為直接點擊的元素li，而e.currentTarget為被監(jiān)聽的元素ul。由此我們可以得到一個啟發(fā)，觸發(fā)事件的元素與被監(jiān)聽的元素不一定是一個元素。于是就來到了本文的重點內(nèi)容——事件委托。
2. 如何進行事件委托什么情況下回用到事件委托呢?舉兩個例子1） 當存在多個元素可以共用同一個監(jiān)聽器<body> <ul><li>點<span>這里</span></li><li>點這里</li> </ul> <style>ul, li{list-style:none;border:1px solid;padding:10px;background:#ddd } li{text-align:center;margin:10px;background:#fff } </style> </body> </html> x1<body>2<ul>3 ?<li>點<span>這里</span></li>4 ?<li>點這里</li>5</ul>6<style>7 ?ul, li{8 ?list-style:none;9 ?border:1px solid;10 ?padding:10px;11 ?background:#ddd12}13li{14 ?text-align:center;15 ?margin:10px;16 ?background:#fff17}18</style>19</body>20</html>21上面的代碼中定義了如圖所示的一個ul，它包裹著兩個li，第一個li中還有一個子元素span。如果我們希望點擊兩個li均執(zhí)行同一條命令時，第一種方法是為每個li都綁定一個監(jiān)聽器，但當li很多時，這樣處理就過于繁瑣。
這時我們會想到可以直接監(jiān)聽ul，為ul綁定事件函數(shù)，那么只要li存在于ul的內(nèi)部，點擊任意的一個li都會執(zhí)行這條命令。但同樣存在一個問題，當點擊li的外部，也就是圖中的灰色區(qū)域時，命令同樣會被執(zhí)行。
那么如何僅僅在點擊li的覆蓋區(qū)域的時候才執(zhí)行這段命令呢，可以用以下這段代碼。
var ul=document.querySelector('ul') ul.addEventListener('click',function(e){var el = e.target //判斷當前點擊的元素是否為li，如果不是，執(zhí)行以下的while循環(huán)while(el.tagName !== 'LI'){ //如果點擊的元素為ul，直接跳出循環(huán)if(el === ul){el = nullbreak;} //否則，將當前元素父元素賦給elel=el.parentNode} //如果最后el不為null，則打出'ok'if(el){console.log('ok')} //否則，打出'你點擊的不是li'else console.log('你點擊的不是li') }) x1var ul=document.querySelector('ul')2ul.addEventListener('click',function(e){3 ?var el = e.target4//判斷當前點擊的元素是否為li，如果不是，執(zhí)行以下的while循環(huán)5 ?while(el.tagName !== 'LI'){6//如果點擊的元素為ul，直接跳出循環(huán)7 ? ?if(el === ul){8 ? ? ?el = null9 ? ? ?break;10 ? }11//否則，將當前元素父元素賦給el12 ? ? ?el=el.parentNode13 }14//如果最后el不為null，則打出'ok'15 ?if(el){16 ? ?console.log('ok')17 }18//否則，打出'你點擊的不是li'19 ?else console.log('你點擊的不是li')20})21這段代碼實現(xiàn)了當點擊的區(qū)域在li范圍內(nèi)時，不管點擊的是li元素本身，還是li的子元素span，都會執(zhí)行console.log('ok')，但當點擊區(qū)域超出li的范圍，則執(zhí)行' console.log('你點擊的不是li')'。這就成功實現(xiàn)了一個事件委托。
（2） 用事件委托實現(xiàn)動態(tài)監(jiān)控
還有一種情況，也會用到事件委托，那就是需要動態(tài)監(jiān)控的時候。
看以下代碼：
<html> <body> <ul><li>1</li><li>2</li><li>3</li><li>4</li> </ul><button id=addButton>+</button> </body> </html> <style> li{border: 1px solid; } </style> <script> addButton.onclick = function(){var li = document.createElement('li')li.textContent = 'new' document.querySelector('ul').appendChild(li) } document.querySelector('ul').onclick = function(e){console.log(e.target) } </script> </body> </html> x1<html>2<body>3<ul>4 ?<li>1</li>5 ?<li>2</li>6 ?<li>3</li>7 ?<li>4</li>8</ul>9 ?<button id=addButton>+</button>10</body>11</html>12<style>13li{14 ?border: 1px solid;15}16</style>17<script>18addButton.onclick = function(){19 ?var li = document.createElement('li')20 ?li.textContent = 'new' 21 ?document.querySelector('ul').appendChild(li)22}23document.querySelector('ul').onclick = function(e){24 ?console.log(e.target)25}26</script>27</body>28</html>29這段代碼實現(xiàn)的效果如下：
當點擊左下角的加號按鈕時，會增加一個新的li，同時在點擊li時，在控制臺輸出被點擊的li的內(nèi)容。這就是用事件委托實現(xiàn)動態(tài)監(jiān)控。
來自為知筆記(Wiz)
轉載于:https://www.cnblogs.com/zjx2011/p/8447512.html
總結
以上是生活随笔為你收集整理的javascript举例介绍事件委托的典型使用场景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python面向对象基础：编码细节和注意
- 下一篇： 1028: [JSOI2007]麻将