jQuery change event firing on select when arrows pressed
<p>I've seen in numerous places that jQuery's change event on a select will only fire on blur or mouse-click, yet when I try it out, the event also fires on every arrow key press. I'm trying to get the change event to not fire when arrows are used to select an option. For example:</p>

<pre><code>&lt;select size="4" id="more" name="more" required="required"&gt;
    &lt;option value="0"&gt;No&lt;/option&gt;
    &lt;option value="1"&gt;Yes&lt;/option&gt;
    &lt;option value="2"&gt;Maybe&lt;/option&gt;
    &lt;option value="3"&gt;No clue&lt;/option&gt;
&lt;/select&gt;

$('#more').on('change', function(event){
    alert('hi');
});​
</code></pre>

<p>This fiddle demonstrates the event firing when:
<a href="http://jsfiddle.net/McWatt/x5cTr/7/" rel="nofollow">http://jsfiddle.net/McWatt/x5cTr/7/</a></p>

<p>According to the jQuery change() page, if I tab to the select, then use the arrows to select an option, the change event should not fire until the select loses focus (at least that is how I am reading it). In reality, I am seeing the change event fire with every arrow key press.</p>

<p><a href="http://api.jquery.com/change/" rel="nofollow">http://api.jquery.com/change/</a></p>

<blockquote>
  <p>For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.</p>
</blockquote>

<p>Has this behavior changed, or am I not understanding the functionality?</p>

<p>Update: I was misreading the jQuery docs, although they could be clearer. I've accepted the answer that led me to that realization. For the actual solution to my problem, I bound a keydown event to the select that set a data attribute to false if the arrows were used. Then in the change binding, I set a condition to only execute code on change if the data attribute was true. This isn't the best solution as it effectively killed the change callback code if an arrow was used, but since there is an alternate way to trigger the functionality (via a button), I could live with this functionality.</p>

<p>Update2: 
Here is a working fiddle: <a href="http://jsfiddle.net/McWatt/BR8QQ/" rel="nofollow">http://jsfiddle.net/McWatt/BR8QQ/</a></p>

<pre><code>// prevent change event being fired on arrow keys
$('#more').data('activation', 'activated').bind({
    keydown: function(event) {
        if(event.which === 38 || event.which === 40){
            $(this).data('activation', 'paused');
        }
    },
    click: function(event) {
        if($(this).data('activation') === 'paused'){
            $(this).data('activation', 'activated');
            $(this).trigger('change');
        }
    },
    change: function(event) {    
        if($(this).data('activation') === 'activated'){
            var time = new Date();
            $('#changed').text(event.type + ": " + time.getTime());
        }
    }
});
</code></pre>

<p>​</p>
