Tworzenie i wywołanie custom eventu

Question

Chcę wymusić wywołanie zdarzenia change na radio buttonie i nie rozumiem, dlaczego EventListener, który łapie to zdarzenie inaczej je widzi, niż ja je utworzyłem oraz, oczywiście, nie reaguje na nie, tylko pokazuje błąd (poniżej screen z konsoli):

HTML:

<form id="manage-accounts">
            <label class="options"><input type="radio" name="choose-option" value="chooseAccount" checked>Wybierz konto</label>
            <label class="options"><input type="radio" name="choose-option" value="createAccount">Stwórz konto</label>

            <button type="button" id="submit-account" class="only">Zatwierdź</button>
</form>

 

JavaScript:

document.getElementById('manage-accounts').addEventListener('change', switchRadios, false);
document.getElementById('manage-accounts').addEventListener('click', submitNewCustomer, false);


 function switchRadios(ev, triggered)
 {
        console.log('RADIO change?', ev);

        if (ev.target.type === 'radio' || triggered) // w konsoli pojawia sie blad "Cannot read property 'type' of null"
        {
             if (ev.target.value === 'createAccount')
             {
                  /* kod */
             }
             else
             {
                  /* kod */
             }
        }
}

function submitNewCustomer(ev)
{
        var event = new CustomEvent('change', {
              isTrusted: true,
              target: ev.target.querySelector('input'),
              currentTarget: ev.target.parentNode
        });

       switchRadios(event, true); // chce wywolac funkcje programowo
}

 

Konsola (na czerwono wymuszony event, który nie działa; na zielono, gdy ja klikam i jest ok): http://imgur.com/ECPVmgO

Czy źle robię podając w CustomEvent dane, których de facto oczekuje EventListener? Bo nie wiem jak w inny sposób uruchomić funkcję switchRadios(), która sprawdza ev.target.type. Próbowałem wykonać (zamiast wywołania funkcji switchRadios(event, true)) 

ev.target.parentNode.dispatchEvent(event);

, ale to nie przynosi żadnego efektu. Chcę po prostu programowo wywołać zdarzenie zmiany stanu radio buttona - tak jakbym kliknął w niego i zmienił na inny. Bo gdy sam klikam i zmieniam, to wszystko działa.

Answer 1

CustomEvent to nie to samo, co Event! Jeśli chcesz symulować natywne zdarzenia, nie wykorzystuj CustomEvent (bo – jak sama nazwa wskazuje – to obiekt określający jakieś niestandardowe zdarzenie) tylko konkretny konstruktor zdarzenia → https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Triggering_built-in_events

Comments

Co oznacza 

var canceled = !cb.dispatchEvent(event);

, bo zostało użyte w przykładzie i w dokumentacji dispatchEvent też jest

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Tzn., dlaczego jest tam wykrzyknik (negacja) wywołania tego eventu i jest to przypisane do canceled? Po co, później, sprawdzać anulowanie eventu, jeśli dobrze to rozumiem?

---

Bo jeśli ktoś anulował klik, to nie ma sensu odpalać np. rzeczy związanych z klikniętym elementem.

---

Jak można anulować klik? Można coś odznaczyć, ale nie można odkliknąć klikniętego już przycisku. Chyba, że wziąć pod uwagę kliknięcie (wciśnięcie) przycisku, ale zamiast puścić przycisk myszki (tak jak to się dzieje podczas "normalnego" kliku), to przesunąć myszkę na bok i wtedy puścić przycisk (przeciągnięcia anulują klik, tzn. wtedy kliknięcie nie jest traktowane jak kliknięcie - to zaobserwowałem, ale jako użytkownik) - nie znam innego sposobu na anulowanie kliku.

---

Hm, może powinienem to ściślej powiedzieć: anulować domyślną akcję przy kliku → event.preventDefault.