JS - Vytvoření třídy v událostech

Ahoj, můžu vytvořit třídu v nějaké události?
Třeba
<button onclick="new myClass()">Click me</button>

popřípadě pokud budu potřebovat objekt tak
<button onclick="obj = new myClass()">Click me</button>

Je to použitelné nebo je to prasárna? Díky

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
Když nastavím takto události, var polozky = document.querySelectorAll("#menu > li , #menu2 > li , #… Kolemjdoucíí 18.01.2020 03:16	Kolemjdoucíí	18.01.2020 03:16
Ak chceš odstrániť event listener, musíš vedieť jeho referenciu. V kóde, ktorý si skúsil, sa snažíš… moose 18.01.2020 03:50	moose	18.01.2020 03:50
Chová se to nějak divně, pokud kliknu po prvé tak se v constructoru MyClass vypíše console.log('jsem… Kolemjdoucíí 18.01.2020 14:13	Kolemjdoucíí	18.01.2020 14:13
Ukaž kód. Wikan 18.01.2020 14:45	Wikan	18.01.2020 14:45
Tady je kód. Položky v seznamech se mění, vytvářejí se nové seznamy a některé seznamy se zase nezobr… Kolemjdoucíí 18.01.2020 16:10	Kolemjdoucíí	18.01.2020 16:10
To volanie init v konštruktore máš asi navyše. Teraz vždy keď niekto klikne na LI, tak znovu všetko… poslední moose 19.01.2020 22:53	moose	19.01.2020 22:53

Když nastavím takto události,

var polozky = document.querySelectorAll("#menu > li , #menu2 > li , #menu3 > li");
for ( var polozka of polozky){
polozka.addEventListener('click', (event) => new MyClass(event.target));
}

jak je zase všechny smažu? Zkoušel jsem tohle - bez výsledku :( Díky

var polozky = document.querySelectorAll("#menu > li , #menu2 > li , #menu3 > li");
for ( var polozka of polozky){
polozka.removeEventListener('click', (event) => new MyClass(event.target));
}

Ak chceš odstrániť event listener, musíš vedieť jeho referenciu. V kóde, ktorý si skúsil, sa snažíš odstrániť iný event listener, než ktorý bol pridaný (aj keď jeho implementácia vyzerá rovnako).

const onClick = (event) => new MyClass(event.target));
// alternatívne:
// function onClick(event) {
//     new MyClass(event.target);
// }

for (let polozka of polozky) {
    polozka.addEventListener('click', onClick);
}

for (let polozka of polozky) {
    polozka.removeEventListener('click', onClick);
}

Obyčajne je lepšie zavesiť obsluhu udalosti priamo na zoznam namiesto na jeho položky, hlavne v prípade, keď je tých položiek veľa (viď google: event delegation). Ja by som napr. dal všetkým tým menu rovnakú CSS triedu a cez addEventListener by som pridal obsluhu iba menu, nie každej položke menu (+ samozrejme upravil príslušnú obsluhu danej udalosti). Pravdepodobne si budeš chcieť ešte pozrieť, na čo sa používa event.currentTarget.

Chová se to nějak divně,
pokud kliknu po prvé tak se v constructoru MyClass vypíše console.log('jsem tu');
pokud kliknu po druhé tak se v constructoru MyClass vypíše console.log('jsem tu');
pokud kliknu po třetí tak se v constructoru MyClass vypíše 4 x console.log('jsem tu');
pokud kliknu po čtvrté tak se v constructoru MyClass vypíše 8 x console.log('jsem tu');
pokud kliknu po páté tak se v constructoru MyClass vypíše 16 x console.log('jsem tu');
pokud kliknu po šesté tak se v constructoru MyClass vypíše 32 x console.log('jsem tu');
atd...

pokud nastavím onclick každému LI ručně přímo v html, funguje to správně, nechápu.

Ukaž kód.

Tady je kód. Položky v seznamech se mění, vytvářejí se nové seznamy a některé seznamy se zase nezobrazují vždy, proto je v konstruktoru třídy MyClass volání funkce init();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script>
      function init() {
        var elements;
        elements = document.querySelectorAll('#menu-1 > li, #menu-2 > li, #menu-3 > li');
        const onClick = ( event ) => new MyClass ( event . target ) ;
        for (let element of elements) {
          element.removeEventListener('click', onClick);
        } ;
        for (let element of elements) {
          element.addEventListener('click', onClick);
        } ;
      } ;
      class MyClass {
        constructor (event){
          console.log(event.id);
          init();
        } ;
      } ;
    </script>
  </head>
  <body onload="init()">
    <ul id="menu-1">
      <li id="m1">M1</li>
      <li id="m2">M2</li>
      <li id="m3">M3</li>
    </ul>
    <ul id="menu-2">
      <li id="mm1">MM1</li>
      <li id="mm2">MM2</li>
      <li id="mm3">MM3</li>
    </ul>
    <ul id="menu-3">
      <li id="mmm1">MMM1</li>
      <li id="mmm2">MMM2</li>
      <li id="mmm3">MMM3</li>
    </ul>
  </body>
</html>

To volanie init v konštruktore máš asi navyše. Teraz vždy keď niekto klikne na LI, tak znovu všetko inicializuješ.

Zpět do poradny Odpovědět na původní otázku Nahoru