在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/數(shù)據(jù)庫  HTML/ 這兩個for循環(huán)可以簡化嗎?

這兩個for循環(huán)可以簡化嗎?

可以合并嗎

for(i=0;i<oBtn1.length;i++){
      oBtn1[i].onclick=function(){
          alert('a');
      }
}
for(i=0;i<oSp1.length;i++){
      oSp1[i].onclick=function(){
          alert('a');
      }
}
回答
編輯回答
陪我終

1.首先,這是dom 0級的事件?,F(xiàn)在已經(jīng)不推薦這樣注冊了
2.對于多個dom元素需要注冊同類型的事件的情況,可以給他們的父元素注冊事件,在冒泡過程中對子元素的事件進行處理

2018年5月28日 15:23
編輯回答
涼心人

為什么不用事件代理?

2017年7月12日 19:21
編輯回答
擱淺

從代碼中初步斷定為樓主循環(huán)目的為多元素綁定事件并且采用的是DOM 0級事件綁定方式,我這邊先對1樓說的不推薦事件這么注冊補充一些說明,然后在針對代碼簡化提一些建議。

首先,0級的事件綁定一大優(yōu)勢就在于有著較好的向后兼容性,因為最早標準沒出來的時候主流瀏覽器廠商做的事件綁定都這么綁,標準出來后之后總得兼顧以前的代碼吧,因此這種綁定方式也被留了下來。這種綁定方式的最大缺點在于無法為同一個元素同一個事件綁定多個處理函數(shù),而且通過w3c事件綁定即x.addEventListener能指定事件的處理階段是在捕獲階段還是在冒泡階段。綜上所述,因為0級事件存在無法對事件觸發(fā)階段進行更精細的控制并且不在w3c標準內(nèi),因此在使用上要加以斟酌。

針對代碼部分,我理解為樓主合并兩個循環(huán)的目的為簡化代碼量并提升性能,在提升算法性能思路上可以考慮將兩個循環(huán)合并為一個循環(huán),當oBtn1的集合長度與oSp1的長度相等時,此時單層循環(huán)就能解決合并問題。

// 我不知道樓主這邊查詢到的DOM節(jié)點集合是nodeList還是什么類型
// 如果是nodeList類型集合會存在與DOM樹實時同步的特點,建議遍歷時
// 把長度值先另存下來
for(let i=0, len = oBtn1.length; i<len;i++){
  oBtn1[i].onclick = function(){
  alert('a');
}

oSp1[i].onclick = function(){
  alert('b');
}

}

當兩集合長度不一樣的時,一層循環(huán)的一個思路在于使用較長的那個長度作為遍歷次數(shù),
在內(nèi)部根據(jù)當前長度值判斷為哪個元素進行事件綁定。

let lenOfoBtn = oBtns.length;
let lenOfoSp1 = oSp1.length;
let len = Math.max(lenOfBtn, lenOfoSp1);
// 假設(shè)是Sp1長度比較短
for(let i=0; i<len;i++){
 oBtn1[i].onclick = function(){
 alert('a');
}

 if( i < lenBtnOfSp1 ){
   oSp1[i].onclick = function(){
      alert('b');
    }
 }
}

鑒于個人算法功底較差,此時如果想再一步優(yōu)化算法性能,個人暫時沒有可行的思路,或許能遞歸?

當然,在DOM中當然還能使用一樓提出的事件委托進行代碼及性能層面上的優(yōu)化。

// 偽代碼
parentOfObtn = Obtn.parentNode;
parentOfoSp1 = oSp1.parentNode
parentOfbtn.addEventListener("click", function( e ){
// 識別事件觸發(fā)對象是誰的條件語句,可能用類名或其他標識
if( e.target == xxx ){
  alert("a")
}
}, false)
parentOfoSp1 .addEventListener("click", function( e ){
// 識別事件觸發(fā)對象是誰的條件語句,可能用類名或其他標識
if( e.target == xxx ){
  alert("b")
}
}, false)

更一步就是把事件委托到sp1與oBtn共有的祖先節(jié)點上,小透明第一次答題,
希望能對你有幫助。

2017年11月26日 15:50
編輯回答
女流氓

別人問的是可不可以合并,樓上一大坨說的啥,好像恨不得把幾十年學(xué)的js全抖出來,萬一樓主有不可告人的原因而無法使用dom123456789級還有代理呢?

var len = Math.max(oBtn1.length,oSp1.length)
for(i=0;i<len;i++){
    if(oBtn1[i]){
        oBtn1[i].onclick=function(){
           alert('a');
        }
    }
    if(oSp1[i]){
       oSp1[i].onclick=function(){
          alert('a');
      }
    }
      
}
2017年7月23日 00:17
編輯回答
舊城人

樓上的回答已經(jīng)說明怎么做了,但是還是要知道下為什么這樣做,如下:
一般來說,dom需要有事件處理程序,我們都會直接給它設(shè)事件處理程序就好了,那如果是很多的dom需要添加事件處理呢?比如我們有100個li,每個li都有相同的click點擊事件,可能我們會用for循環(huán)的方法,來遍歷所有的li,然后給它們添加事件,那這么做會存在什么影響呢?
在JavaScript中,添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能,因為需要不斷的與dom節(jié)點進行交互,訪問dom的次數(shù)越多,引起瀏覽器重繪與重排的次數(shù)也就越多,就會延長整個頁面的交互就緒時間,這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因;如果要用事件委托,就會將所有的操作放到j(luò)s程序里面,與dom的操作就只需要交互一次,這樣就能大大的減少與dom的交互次數(shù),提高性能;
每個函數(shù)都是一個對象,是對象就會占用內(nèi)存,對象越多,內(nèi)存占用率就越大,自然性能就越差了(內(nèi)存不夠用,是硬傷,哈哈),比如上面的100個li,就要占用100個內(nèi)存空間,如果是1000個,10000個呢,那只能說呵呵了,如果用事件委托,那么我們就可以只對它的父級(如果只有一個父級)這一個對象進行操作,這樣我們就需要一個內(nèi)存空間就夠了,是不是省了很多,自然性能就會更好。

2017年4月27日 18:37
編輯回答
悶油瓶

用delegate模式啊。http://api.jquery.com/on/

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
2018年1月14日 03:33
編輯回答
喜歡你

看你們這么個回答,我。。。想知道題主想問的是啥?給列表添加點擊事件?
那就用事件委托,在列表外層的ul或div上添加點擊吧

document.getElementById('container').addEventListener('click', function(event) {
    var target = event.target;
    if(target.tagName == 'li'){
        alert(target.innerText);
    }
}, false);

ps:
真熱鬧。。。多交流挺好的哈哈?
你們在講dom0級事件讓我想到了React的合成事件的底層。他用的也是事件委托哦。

2018年3月15日 02:38
編輯回答
護她命

還有另一種方式「合并」

function bindF(a) {
  for (var i = 0; i < a.length; ++i) {
    a[i].onclick = function () {
      alert('a');
    };
  }
}

bindF(oBtn1, i);
bindF(oSp1, i);


你知道 loop fusion 嗎

題主的兩個循環(huán)相互之間沒有依賴關(guān)系

如果循環(huán)次數(shù)一樣,是可以合成一個的

即便循環(huán)次數(shù)不一樣

也可以強行合并(雖然理論上會被編譯器再用 loop fission 拆成兩個循環(huán))

const { max } = Math;

var n = max(oBtn1.length, oSp1.length);
var i = 0;

function set(a, i) {
  if (i < a.length) {
    a[i].onclick = function () {
      alert('a');
    };
  }
}

for (; i < n; ++i) {
  set(oBtn1, i);
  set(oSp1, i);
}
2018年4月5日 17:22
編輯回答
青瓷
var clickFunc = function(){
    alert('a');
};
for(i=0;i<oBtn1.length;i++){
      oBtn1[i].onclick=clickFunc;
}
for(i=0;i<oSp1.length;i++){
      oSp1[i].onclick=clickFunc;
}
2018年1月30日 10:12