2011-03-06 11 views
18

tengo una etiqueta de entrada con un detector de eventos onBlur:desenfoque() vs. onBlur()

<input id="myField" type="input" onblur="doSomething(this)" /> 

a través de JavaScript, quiero activar el evento falta de definición en esta entrada de forma que, a su vez, las llamadas la función doSomething.

Mi idea inicial es llamar a la falta de definición:

document.getElementById('myField').blur() 

Pero eso no funciona (aunque sin error).

esto hace:

document.getElementById('myField').onblur() 

¿Por qué? .click() llamará al evento click asociado a un elemento a través del oyente onclick. ¿Por qué blur() no funciona de la misma manera?

+1

Creo que blur() es jQuery y onBlur() es Javascript. – Ray

+0

@Ray no, eso no es realmente exacto, aunque es cierto que jQuery proporciona un método de "desenfoque" para activar un evento (o registrar un controlador). Sin embargo, ese método lo proporcionan los objetos jQuery y no está disponible en los elementos DOM simples. – Pointy

Respuesta

23

Este:

document.getElementById('myField').onblur(); 

obras porque el elemento (la <input>) tiene un atributo llamado "onBlur" cuyo valor es una función. Por lo tanto, puedes llamarlo. Sin embargo, no indica al navegador que simule el evento de "desenfoque" real; no hay objeto de evento creado, por ejemplo.

Los elementos no tienen un atributo "desenfoque" (o "método" o lo que sea), por eso es que lo primero no funciona.

+0

Pero puede llamar a .click() para simular un evento de clic, ¿correcto? Mi error fue asumir .blur() existió también. ¡Gracias por la respuesta! –

+3

@DA: '.blur()' existe en algunos navegadores, pero primero debe darle al elemento focus si no lo tiene. [Pruebe este ejemplo] (http://jsfiddle.net/zYQqa/1/) en Chrome. No sé qué navegadores lo soportan o no. – user113716

+1

Sí, porque los navegadores ** do ** admiten un método en elementos DOM llamado "clic". Estoy de acuerdo en que simplemente no es consistente; muchas de estas cosas evolucionaron rápidamente hace 10 o más años antes de que alguien tuviera la oportunidad de pensar mucho sobre la sincronización. Creo que esa es una de las razones principales por las que bibliotecas como Prototype y jQuery son tan populares. – Pointy

2

supongo que es sólo porque el evento onBlur se llama como resultado del foco de entrada perder, no hay una desenfoque acción asociada con una entrada, al igual que hay un clic acción asociada con una botón

10

Al contrario de lo que dice pointy, el método blur() existe y es parte de w3c standard. La siguiente exaple funcionará en todos los navegadores modernos (incluyendo IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Javascript test</title> 
     <script type="text/javascript" language="javascript"> 
      window.onload = function() 
      { 
       var field = document.getElementById("field"); 
       var link = document.getElementById("link"); 
       var output = document.getElementById("output"); 

       field.onfocus = function() { output.innerHTML += "<br/>field.onfocus()"; }; 
       field.onblur = function() { output.innerHTML += "<br/>field.onblur()"; }; 
       link.onmouseover = function() { field.blur(); }; 
      }; 
     </script> 
    </head> 
    <body> 
     <form name="MyForm"> 
      <input type="text" name="field" id="field" /> 
      <a href="javascript:void(0);" id="link">Blur field on hover</a> 
      <div id="output"></div> 
     </form> 
    </body> 
</html> 

Tenga en cuenta que he utilizado en lugar de link.onmouseoverlink.onclick, porque de lo contrario haga clic en el mismo habría eliminado el foco.