blur vs onblur

Question

I have a input tag with an onblur event listener    lt input id  myField  type  input  onblur  doSomething this     gt    Via JavaScript  I want to trigger the blur event on this input so that it  in turn  calls the doSomething function   My initial thought is to call blur   document getElementById  myField   blur     But that doesn t work  though no error    This does   document getElementById  myField   onblur     Why is that   click   will call the click event attached to an element via the onclick listener  Why does blur   not work the same way

User · Answer

I guess it s just because the onblur event is called as a result of the input losing focus  there isn t a blur action associated with an input  like there is a click action associated with a button

User · Answer

This   document getElementById  myField   onblur      works because your element  the  lt input gt   has an attribute called  onblur  whose value is a function  Thus  you can call it   You re not telling the browser to simulate the actual  blur  event  however  there s no event object created  for example   Elements do not have a  blur  attribute  or  method  or whatever   so that s why the first thing doesn t work

User · Answer

Contrary to what pointy says  the blur   method does exist and is a part of the w3c standard  The following exaple will work in every modern browser  including IE     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt title gt Javascript test lt  title gt           lt script type  text javascript  language  javascript  gt              window onload   function                                 var field   document getElementById  field                    var link   document getElementById  link                    var output   document getElementById  output                     field onfocus   function     output innerHTML      lt br  gt field onfocus                        field onblur   function     output innerHTML      lt br  gt field onblur                        link onmouseover   function     field blur                               lt  script gt       lt  head gt       lt body gt           lt form name  MyForm  gt               lt input type  text  name  field  id  field    gt               lt a href  javascript void 0    id  link  gt Blur field on hover lt  a gt               lt div id  output  gt  lt  div gt           lt  form gt       lt  body gt   lt  html gt    Note that I used link onmouseover instead of link onclick  because otherwise the click itself would have removed the focus

[javascript] blur() vs. onblur()

Examples related to javascript

Examples related to jquery

Examples related to onblur