可以合并嗎
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');
}
}從代碼中初步斷定為樓主循環(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é)點上,小透明第一次答題,
希望能對你有幫助。
樓上的回答已經(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)存空間就夠了,是不是省了很多,自然性能就會更好。
用delegate模式啊。http://api.jquery.com/on/
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});看你們這么個回答,我。。。想知道題主想問的是啥?給列表添加點擊事件?
那就用事件委托,在列表外層的ul或div上添加點擊吧
document.getElementById('container').addEventListener('click', function(event) {
var target = event.target;
if(target.tagName == 'li'){
alert(target.innerText);
}
}, false);
ps:
真熱鬧。。。多交流挺好的哈哈?
你們在講dom0級事件讓我想到了React的合成事件的底層。他用的也是事件委托哦。
還有另一種方式「合并」
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);
}
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
達內(nèi)教育集團成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合/校企合作的政策,積極推進“中國制造2025”,實現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰,中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。