mozilla
Your Search Results

    change

    The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

    General info

    Specification
    HTML5
    Interface
    Event
    Bubbles
    Yes
    Cancelable
    No
    Target
    Element
    Default Action
    undefined

    Properties

    Property Type Description
    target Read only EventTarget The event target (the topmost target in the DOM tree).
    type Read only DOMString The type of event.
    bubbles Read only boolean Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?

    Description

    Depending on the kind of form element being changed and the way the user interacts with the element, the change event fires at a different moment:

    • When the element is activated (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">;
    • When the user commits the change explicitly (e.g. by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
    • When the element loses focus after its value was changed, but not commited (e.g. after editing the value of <textarea> or <input type="text">).

    Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the <select> (see bug 126379).

    The HTML specification lists the <input> types that should fire the change event.

    Examples

    An incomplete example, which probably doesn't work on all browsers, on jsfiddle: http://jsfiddle.net/nfakc/5/.

    Example: Change event on a select

    The following code handles the change event on a select by calling the changeEventHandler function in the onchange attribute. It reads the value of the event target and shows it in an alert.

    <html>
      <head>
        <title>Example: Change event on a select</title>
        <script type="text/javascript">
          function changeEventHandler(event) {
            alert('You like ' + event.target.value + ' ice cream.');
          }
        </script>
        </head>
        <body>
            <label>Choose an ice cream flavor: </label>
            <select size="1" onchange="changeEventHandler(event);">
                <option>chocolate</option>
                <option>strawberry</option>
                <option>vanilla</option>
            </select>
        </body>
    </html>
    

    See also

    NetworkInformation.connection fires the change event when the connection information changes.

    Browser Compatibility

    According to QuirksMode Chrome and Firefox have been compatible for some time, but IE9 and earlier versions of IE10 have incomplete support.

    Document Tags and Contributors

    Last updated by: spiegelp,