Új hozzászólás Aktív témák

• Jim-Y veterán

  #4089

  #4087 Sk8erPeter

  2014-04-17 20:02:08

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Jim-Y

  veterán

  #4087 Sk8erPeter

  #4087 Sk8erPeter

  Nem értelek, itt már egy az egyben azt írtam le, mit tudsz csinálni.

  "item.addEventListener('clck', csodalatosEventHandler -> na ennek akarok paramétert megadni. Ugyanis ezt a függvényt újrahasznosítanám később is."
  Miért akarsz olyan módon csinálni valamit, amire nem való, vagy amit nem lehet vele?
  https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
  target.addEventListener(type, listener[, useCapture]);
  target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
  Ez a fejléc, és kész.

  Azt nem fejtetted ki, mi a gondod azzal, hogy az event handlerben kezeled le, mi történjen a kattintás által célzott (e.target) elemmel? Így szokás ezt elintézni, és ennyi. Hogy most az abban történteket egy erre külön kitalált függvényben intézed-e még el, vagy aztán azonbelül hány függvényt/metódust hívogatsz, az tervezői döntés.
  Azt nem mesélted el még, mi az alapfeladat, ami miatt zavar, hogy az addEventListenernek nem tudsz átadni olyan paramétereket, amit az nem enged... Egyébként ilyen alapon saját addEventListenert is definiálhatsz valami más néven, aminek beadhatsz különböző paramétereket, wrappert építve az alap addEventListener köré, aztán egyedileg kezelve, csak nem sok értelmét látom.

  Ja, még egy fontos dolog: használhatod nyugodtan a data-attribútumokat, így lényegében "be is drótozhatsz" bizonyos tulajdonságokat az elembe, amik konkrétan arra vonatkoznak, ezeket meg lekérheted a JavaScript-kódból. Ez is lehet egyfajta "paraméterezés", és akkor lehet, hogy megkerülted a problémát, mert nem kell óriási switch-case. (Ne brutálsok if-else-t írjál, ha már, erre találták ki a switch-case-t. De előbb gondold végig, vagy írd le ide, mit szeretnél konkrétan.)

  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