Difference between focusin/focusout and focus/blur, with example

by

The focusin and focusout events bubble, the focus and blur events doesn’t. That means that you can use the focusin and focusout on the parent element of a form field.

Demo: http://jsfiddle.net/pAp4E/

HTML:

<div class="parent">
    <input type="text" />
</div>

<div class="log"></div>

Javascript:

$('.parent')
    .focusin(function(){log('div focusin');})
    .focusout(function(){log('div focusout');})
    .focus(function(){log('div focus');})
    .blur(function(){log('div blur');});
$('input')
    .focusin(function(){log('input focusin');})
    .focusout(function(){log('input focusout');})
    .focus(function(){log('input focus');})
    .blur(function(){log('input blur');});

function log(str){
  $('.log').append($('<div/>').text(str));
}

When you run it, you see that only the input gets all the events, the parent only gets the focusin and focusout events.

More Related Contents:

  1. Passing variable to function in javascript and jQuery
  2. Reloading a single div in an html page [closed]
  3. jQuery function to get all unique elements from an array?
  4. Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’ in
  5. How to show progress bar while loading, using ajax
  6. Resetting a setTimeout
  7. Load local JSON file into variable
  8. How to get the hours difference between two date objects? [duplicate]
  9. How to use jQuery in AngularJS
  10. How do I find the absolute position of an element using jQuery?
  11. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  12. Difference between onload() and $.ready?
  13. change html text from link with jquery
  14. Creating a select box with a search option
  15. Compress images on client side before uploading [closed]
  16. JavaScript: Know when an image is fully loaded
  17. How to handle in textarea?
  18. Copy selected text to the clipboard WITHOUT using flash – must be cross-browser
  19. Prevent browser from loading a drag-and-dropped file
  20. Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile)
  21. How can I use a variable in a jQuery attribute selector?
  22. One big javascript file or multiple smaller files? [duplicate]
  23. Compare two date formats in javascript/jquery
  24. How can I dynamically highlight strings on a web page?
  25. Jquery delay execution of script
  26. Changing cursor to waiting in javascript/jquery
  27. Bootstrap modal hide is not working
  28. Call angularjs function using jquery/javascript
  29. Returning value from confirmation dialog using JQuery UI dialog
  30. A non-nested animation sequence in jQuery?

Leave a Comment