-
Fototrend
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Jim-Y
veterán
válasz
Sk8erPeter
#4087
üzenetére
Story mode on

Adott a feladat, vannak egy generált oldalon gombok, a fajta gombból is >= 0 darab, b fajta gombból is >=0 de általában több darab. Ezen kívül még van pár elem amire listenert kell kötni mert azok is csinálnak valamit. Maga az action nagyon egyszerű, a és b gombok esetén is csak el kell navigálni egy adott url-re, de az url-ben változnak a query paraméterek. Ugye ebben semmi nehéz sincs, meg is csináltam gyorsan, kb ilyeneket írtam:
var aButtons = document.getElementsByClassName('a'),
bButtons = document.getElementsByClassName('b'),
cButton = document.getElementById('c'),
dDropdown = document.getElementById('d');
for(var i = 0; i < aButtons.length; ++i){
aButtons[i].addEventListener('click', function(){
var queryParam = this.getAttribute("data-myImportantValue");
window.document.location.href = 'localhost:myport/myservice/..stb/myFun&query=' + queryParam;
return false;
});
}
.. bButtons-re is..
...cButton-re is stb..Mivel gyorsan megvolt, gondoltam akkor megpróbálom szebben megírni, arra gondoltam, hogy például az szebb lenne, meg memória (bár itt annyira mindegy...) szempontjából is jobb lenne, ha a function() { ... } helyett lenne egy eventHandler függvényem amit az összesben tudnék használni. És az lenne még jó, gondoltam, ha a 'localhost:myport/myservice/..stb/myFun' részt, mivel myFun minden esetben más aButton-ök esetén myFunc, bButton-ok esetén myFunc2 stb... ha ezt megadhatnám a handler paraméterében, valamint arra gondoltam, hogy a queryParamétereket &query= is egy paraméterben adnám át a handler függvénynek.
Azt nem tudtam, hogy ezt így nem lehet, sőt, igazából lehet.
Megnéztem az addActionListener Chrome beli implementációját, máshol is tuti így van, ott van egy listeners tömb, amibe a listener függvény objektumokat teszik. Ezáltal később lehet mondani removeListenert amikor csak simán kiveszik a listener függvényobj-ot a tömbből. Ezért ha ezt írom, az nem jó.
addEventListener('click', eventHandler(param1, param2));
Mert ebben az esetben a () miatt rögtön meg is hívom a függvényt ami ugye nem jó, a tömbbe se tudja a böngésző így betenni stb...
Mentem tovább, mi lenne, ha a paramétereket bindolnám az objekthez, így nem kéne a függvényt rögtön meghívni, a böngésző el tudná tárolni a listeners tömbben:
addEventListener('click', eventHandler.bind(thisArg, param1, param2));
Ez jobb, itt a két paraméter a függvényhez lett bindolva, ezeket elérem egy ilyen fügvénnyel utána:
function eventHandler(param1, param2) { }
De ezzel meg az a gond, hogy a thisArg-nak nem tudtam átadni se az event-et, se a this-t. Tehát az eventListener-ben utána nem érem el a aButtons objektet, szóval ez se jó így.
Na és valahol itt írtam be a topikba, hogy hátha valahogy meg lehet úgy csinálni, hogy az eventHandler függvénynek átadom a aButtons(i) referenciát mint thisArg, valamint a saját paramétereimet, és akkor írhattam volna ilyeneket:
for(var i = 0; i < aButtons.length; ++i){
aButtons[i].addEventListener('click', eventHandler(this, 'localhost:myport/myservice/..stb/myFun', {
someId: "data-myImportantValue",
somOtherId: "data-otherImportantId"
}));
}
for(var i = 0; i < bButtons.length; ++i){
bButtons[i].addEventListener('click', eventHandler(this, 'localhost:myport/myservice/..stb/myFun2', {
someStuff: "akarmi"
}));
}
function eventHandler(baseUrl, queryParams) {
var queryString = processParams(queryParams);
// queryString:
// &someId=<this.getAttribute("data-myImportantValue")>&someOtherId=<this.getAttribute("data-otherImportantId")>
window.document.location.href = baseUrl + queryString;
}Szóval semmi komoly, csak szebben/jobban/máshogy akartam megcsinálni, ennyi

Megj: PH random italic tageket tesz a hsz-be, wtf? Nem győzöm törölni őket

Hát de ez mi? Nem tudom kitörölni a hsz-ből a dőlt bekezdéseket, mert visszteszi őket :/ Itt van amit nem sikerül szépen formáznom: pastebin
Karma: de, pont ezt, de a sokBtns eszembe se jutott ^^

Új hozzászólás Aktív témák
- Autós topik
- Synology NAS
- Milyen asztali (teljes vagy fél-) gépet vegyek?
- Jelentősen meglazítja a gyeplőt a Windows 11 frissítéseknél a Microsoft
- LG LCD és LED TV-k
- AliExpress tapasztalatok
- BestBuy topik
- Xiaomi 14 - párátlanul jó lehetne
- Okos otthon - Home Assistant, openHAB és más nyílt rendszerek
- Fejhallgató erősítő és DAC topik
- További aktív témák...
- Katana HX B14WFK 15.6" QHD IPS i7-14650HX RTX 5060 16GB 512GB NVMe magyar vbill gar
- Asus A15 FA506NC 15.6" FHD IPS Ryzen 5 7535HS RTX 3050 16GB 512GB NVMe magyar vbill gar
- Kezdő Gamer PC-Számítógép! Csere-Beszámítás! I5 7400 / GTX 1650 / 16GB DDR4 / 256 SSD + 1TB HDD
- Asus VivoPc VC62B Mini PC (NAS)
- iPad 11 128GB Wifi Újszerű/2027.08.03.Gar.Akku 100%/p4868
- Bomba ár! Asus R512CA - Core i3 I 4GB I 500GB I 15,6" HD I HDMI I Cam I W10 I Garancia!
- AKCIÓ! 2TB Kingston Fury Renegade NVMe SSD meghajtó garanciával hibátlan működéssel
- Apple iPhone 13 256GB, Kártyafüggetlen, 1 Év Garanciával
- Xbox Series S 512 GB + kontroller 6 hó garancia, számlával!
- ÚRIS10!!! RAMÁRON! LEGION 5 i7-13650HX 16GB RAM 512GB SSD RTX 5070 8GB
Állásajánlatok
Cég: Laptopműhely Bt.
Város: Budapest



