mozilla
Your Search Results

    blur (event)

    The blur event is fired when an element has lost focus. The main difference between this event and focusout is that only the latter bubbles.

    General info

    Specification
    DOM L3
    Interface
    FocusEvent
    Bubbles
    No
    Cancelable
    No
    Target
    Element
    Default Action
    None.
    Note: The interface was Event prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21). (bug 855741)

    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?
    relatedTarget Read only EventTarget (DOM element) null

    Event delegation

    There are two ways of implementing event delegation for this event : by using the focusout event in browsers that support it (all browsers but Firefox), or by setting the "useCapture" parameter of addEventListener to true:

    HTML Content

    <form id="form">
      <input type="text" placeholder="text input">
      <input type="password" placeholder="password">
    </form>

    JavaScript Content

    var form = document.getElementById("form");
    form.addEventListener("focus", function( event ) {
      event.target.style.background = "pink";    
    }, true);
    form.addEventListener("blur", function( event ) {
      event.target.style.background = "";    
    }, true);

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support ? (Yes) ? ? ?
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ?

    ?

    ? ? ? ?

    Document Tags and Contributors

    Last updated by: samdroid,