• react.png
  • angular.png
  • node.png
  • html5.png
  • php.png

50 Javascript - El objeto evento en JavaScript

javascript_oficial.png

Cuando ocurre un evento, el objeto evento nos puede dar información a cerca del evento, y sobre el elemento implementado. 

Información cómo por ejemplo, sobre que elemento se realizó el evento, Cual tecla fue presionada por un evento keypress, etc.

El objeto evento lo vamos a pasar sobre cualquier función que esta en los manejadores de eventos o event listeners. Si queremos pasar parámetros a una función anónima, el objeto evento lo pasaremos cómo primer parámetro de esa funcion anonima. Cuando pasamos el objeto evento cómo parámetro dentro de una función usualmente se le da el nombre con la letra e (por evento). 

 

[Ad:Sky]
 
El evento objeto tiene varias propiedades y métodos, a continuación algunos:

Propiedades    Descripción 
target                Obtiene el elemento que desencadena un evento específico.
type                   Tipo de evento que fue disparado.
cancelable         Cancelar el comportamiento predeterminado de un elemento.

Métodos         Descripción
preventDefault()    Cancelar el comportamiento predeterminado de un evento.
stopPropagation()    Detener el evento por bubbling o capturing. 

Para IExplorer 5 al 8, los métodos y las propiedades cambian su nombre. 

IE 5 al 8
Propiedades        Descripción 
srcElement            Obtiene el elemento que desencadena un evento específico.
type                       Tipo de evento que fue disparado.
No lo soporta        Cancelar el comportamiento predeterminado de un elemento.

Métodos                Descripción
returnValue            Cancelar el comportamiento predeterminado de un evento.
cancelBubble         Detener el evento por bubbling o capturing. 

Event listener sin parámetros y el objeto evento

function checkUsername (e) {
    var target = e.target; // Obtenemos el target del evento.
}

var el = document.getElementById('username');
el.addEventListener('blur', checkUsername, false); // No pasamos parametros a la funcion

Event listener con parámetros y el objeto evento

function checkUsername(e, minLength){
    var target = e.target; // Obtenemos el target del evento.
}

var el = document.getElementById('username');
el.addEventListener('blur', function(e){ // Dentro de la funcion anonima colocamos el parametro e (evento).
    checkUsername(e, 5); // pasamos los parametros a la funcion
}, false);

@telecristy.

0/1000

Necesitas conectarte ó registrarte para comentar