what order do events fire on radio button click?

问题

I know this is different between browsers; e.g. If I attach a function to the onclick and onchange event of a radio button, then click on it, Chrome fires onchange then onclick, while Firefox does the opposite.

Is there a resource anyone knows of that breaks down this firing order by browser?

回答1:

Here's a JSFiddle that will tell you if you run it in each browser:

http://jsfiddle.net/BUkHz/

<label for="myRadio">Radio Button</label><input type="radio" name="myRadio" id="myRadio"/>
<label for="myRadio">Radio Button 2</label><input type="radio" name="myRadio" id="myRadio2"/>




var myRadio = document.getElementById('myRadio');
    var myRadio2 = document.getElementById('myRadio2');

    myRadio.addEventListener('change', interceptRadioEvent);
    myRadio.addEventListener('click', interceptRadioEvent);
    myRadio2.addEventListener('change', interceptRadioEvent);
    myRadio2.addEventListener('click', interceptRadioEvent);

    function interceptRadioEvent(e){
        //do anything else you want to here...
        radioEventHandler(e);
    }

    function radioEventHandler(e){
        console.log(e.type);
    }

I have a hunch that the order depends on what you're doing - for example if you only have one radio button on first click it will be : change, click then further clicks would be 'click' only as it responds to the click but can't unset it.

I hope that helps.

On a Mac :

Chrome: change then click

Safari: change then click

iOS(6): change then click

来源：https://stackoverflow.com/questions/15580057/what-order-do-events-fire-on-radio-button-click

标签

javascript