TOP

[js高手之路]設計模式系列課程-委托模式實戰微博發布功能(一)
2017-10-10 14:50:12 】 瀏覽:10128
Tags:

在實際開發中,經常需要為Dom元素綁定事件,如果頁面上有4個li元素,點擊對應的li,彈出對應的li內容,怎么做呢?是不是很簡單?

大多數人的做法都是:獲取元素,綁定事件

 1     <ul>
 2         <li>跟著ghostwu學習java script設計模式的應用1</li>
 3         <li>跟著ghostwu學習java script設計模式的應用2</li>
 4         <li>跟著ghostwu學習java script設計模式的應用3</li>
 5         <li>跟著ghostwu學習java script設計模式的應用4</li>
 6     </ul>
 7     <script>
 8         var aLi = document.querySelectorAll( "li" );
 9         aLi.forEach(( ele, ind ) => {
10             ele.addEventListener( "click", ()=> {
11                alert( ele.innerHTML ); 
12             } );
13         });
14     </script>

如果頁面上有1w個元素, 甚至10w個元素呢?

繼續使用上述方式,會有很大的性能問題,這個時候,有人可能要問优乐棋牌app下载,實際中的項目 哪有1w個,10w個元素的。一般的項目可能沒有,但是社交類的網站,如微博,其他的如大批量文件上傳等能功能,都是需要動態創建dom元素,而且數量巨大,并且創建出來的dom元素,一般都需要綁定事件和相應的特效。一般情況下,用普通的綁定事件方式是不能給動態創建的dom元素綁定到事件的,所以這里就產生了兩個問題:

1,當頁面元素很多的時候,如果給這些元素綁定上事件?

2优乐棋牌app下载,當動態創建dom時,如果給動態創建的dom綁定上事件和相應的特效?

這就是本文需要討論的模式-委托模式

采用事件委托可以順利解決上面2個問題

那么,什么是事件委托呢?

給元素的父元素綁定事件,利用冒泡原理,當子元素觸發事件的時候,會去觸發父元素的事件,然后把相應的業務邏輯放在父元素的事件中去處理。通俗點講就是,子元素不做事件綁定,把綁定事件的操作委托給父元素,這就叫做事件委托, 委托有一個特性,他能夠在事件觸發中,識別到具體是由哪個子元素觸發的,這個就是事件對象的target屬性

 1     <ul>
 2         <li>跟著ghostwu學習java script設計模式的應用1</li>
 3         <li>跟著ghostwu學習java script設計模式的應用2</li>
 4         <li>跟著ghostwu學習java script設計模式的應用3</li>
 5         <li>跟著ghostwu學習java script設計模式的應用4</li>
 6     </ul>
 7     <script>
 8         var oUl = document.querySelector("ul");
 9         oUl.addEventListener( "click", ( ev )=>{
10             var oEvent = ev || event;
11             target = oEvent.target || oEvent.srcElement;
12             alert( target.innerHTML );
13         });
14     </script>

當我們點擊li的時候,就能通過事件對象oEvent.target識別到觸發事件的li元素, srcElement是兼容ie的寫法。

在沒有事件委托之間,我們通過java script做一個hover的功能,一般這么做.

 1     <ul>
 2         <li>跟著ghostwu學習設計模式</li>
 3         <li>跟著ghostwu學習設計模式</li>
 4         <li>跟著ghostwu學習設計模式</li>
 5         <li>跟著ghostwu學習設計模式</li>
 6         <li>跟著ghostwu學習設計模式</li>
 7     </ul>
 8     <script>
 9         var aLi = document.getElementsByTagName( "li" );
10         for( var i = 0, len = aLi.length; i < len; i++ ){
11             aLi[i].onmouseover = function(){
12                 this.style.backgroundColor = 'red';
13             }
14             aLi[i].onmouseout = function(){
15                 this.style.backgroundColor = '';
16             }
17         }
18     </script>

如果li元素很多,就會產生性能問題,而采用委托模式优乐棋牌app下载,我們可以這么做

 1     <ul>
 2         <li>跟著ghostwu學習設計模式1</li>
 3         <li>跟著ghostwu學習設計模式2</li>
 4         <li>跟著ghostwu學習設計模式3</li>
 5     </ul>
 6     <script>
 7         var aLi = document.getElementsByTagName("li");
 8         var oUl = document.getElementsByTagName( "ul" )[0];
 9         oUl.onmouseover = function( ev ){
10             var oEvent = ev || event;
11             var target = oEvent.target || oEvent.srcElement;
12             if ( target.tagName.toLowerCase() == 'li' ) {
13                 target.style.backgroundColor = 'red';
14             }
15         }
16         oUl.onmouseout = function( ev ){
17             var oEvent = ev || event;
18             var target = oEvent.target || oEvent.srcElement;
19             if ( target.tagName.toLowerCase() == 'li' ) {
20                 target.style.backgroundColor = '';
21             }
22         }
23     </script>

通過事件委托,把元素綁定到父元素,大大提高性能

至此,我們解決了第一個問題:當頁面元素很多的時候,如果給這些元素綁定上事件

對于新創建的dom元素,普通綁定事件的方式,是不能綁定到這些dom元素的

 1      <input type="button" value="創建">
 2    <ul>
 3        <li>ghostwu1</li>
 4        <li>ghostwu2</  
		

請關注公眾號獲取更多資料



首頁 上一頁 1 2 3 下一頁 尾頁 1/3/3
】【打印繁體】【】【】 【】【】【】 【關閉】 【返回頂部
上一篇[js高手之路] 我的開源javascript.. 下一篇jacascript DOM變動事件