Jquery: ¿diferencia entre event.target y esta palabra clave?

Question

¿Cuál es la diferencia entre event.target y this?

Digamos que tengo

$("test").click(function(e) { 
    $thisEventOb = e.target; 
    $this = this; 
    alert($thisEventObj); 
    alert($this); 
}); 

Sé que la alerta se abrirá valor diferente. ¿Alguien podría explicar la diferencia? Un millón de gracias.

Answer 1

Serán los mismos si hace clic en el elemento que está organizado para el evento. Sin embargo, si hace clic en niño y burbujea, entonces this se refiere al elemento al que está vinculado este controlador, y e.target todavía se refiere al elemento donde se originó el evento.

Se puede ver la diferencia aquí: http://jsfiddle.net/qPwu3/1/

dado este marcado:

<style type="text/css">div { width: 200px; height: 100px; background: #AAAAAA; }​</style>  
<div> 
    <input type="text" /> 
</div>​ 

Si tuviera esto:

$("div").click(function(e){ 
    alert(e.target); 
    alert(this); 
}); 

Un clic en el <input> alertaría a la entrada, a continuación, el div, porque el input originó el evento, el div lo manejó cuando burbujeó. Sin embargo, si usted ha tenido este:

$("input").click(function(e){ 
    alert(e.target); 
    alert(this); 
}); 

Siempre alertaría a la entrada dos veces, porque es tanto el elemento original para el evento y el que lo manejó.

Answer 2

Los eventos se pueden unir a cualquier elemento. Sin embargo, también se aplican a cualquier elemento dentro de dicho objeto.

this es el elemento al que está destinado el evento. e.target es el elemento en el que se hizo clic.

Por ejemplo:

<div> 
    <p> 
    <strong><span>click me</span></strong> 
    </p> 
</div> 
<script>$("div").click(function(e) { 
    // If you click the text "click me": 
    // e.target will be the span 
    // this will be the div 
}); </script> 

Answer 3

respuesta crujiente

este le da la referencia del elementoDOM donde el evento es en realidad adjunta.

event.target le da la referencia del elementoDOM donde se produce el evento.

Respuesta larga

jQuery(document).ready(function(){ 
 
    jQuery(".outer").click(function(){ 
 
\t var obj = jQuery(event.target); 
 
\t alert(obj.attr("class")); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
     Outer div starts here 
 
\t <div class="inner"> 
 
\t  Inner div starts here 
 
\t </div> 
 
</div>

Cuando se ejecuta el código anterior fragmento de código se verá que evento.el objetivo está alertando al nombre de la clase del div que se ha hecho clic.

Sin embargo este dará la referencia de la DOM objeto sobre el que se unen el evento click. Compruebe el siguiente fragmento de código para ver cómo funciona , siempre alertando sobre el nombre de la clase del div en el que hace clic en evento es obligatorio incluso si hace clic en el div interno.

jQuery(document).ready(function(){ 
 
    jQuery(".outer").click(function(){ 
 
    var obj = jQuery(this); 
 
    alert(obj.attr("class")); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    Outer div starts here 
 
    <div class="inner"> 
 
\t  Inner div starts here 
 
    </div> 
 
</div>