jquery/javascript: function (e) {.... ¿qué es e? ¿Por qué es necesario? ¿Qué es lo que realmente hace/logra?

Question

$('#myTable').click(function(e) { 
    var clicked = $(e.target); 
    clicked.css('background', 'red'); 
}); 

Puede alguien explicar esto a mí, y explicar por qué es necesaria e, y lo que realmente hace ..

Answer 1

Usando e es solo una abreviatura de event. Puede pasar cualquier nombre de variable que desee.

// would work just the same 
$('#myTable').click(function(anyothername) { 
    var clicked = $(anyothername.target); 
}); 

Puedes ver más en jQuery's handling of events.

Answer 2

Es el parámetro formal de la función. jQuery pasará un objeto de evento cuando se llame a la función. Esto se usa para determinar el objetivo. Como se señala en el documentation, jQuery siempre pasará un objeto de evento incluso cuando el navegador (por ejemplo, IE) no lo haga.

En este caso, el objetivo le indica en qué elemento se hizo clic originalmente.

Answer 3

Uno de los beneficios de tener e (el objeto que generó el evento) le permite evitar la propagación de comportamientos predeterminados para ciertos elementos. Por ejemplo:

<a id="navLink" href="http://mysite/someOtherPage.htm">Click For Info</a> 

muestra un enlace en el que el usuario puede hacer clic. Si un usuario tiene JavaScript desactivado (¿por qué? No lo sé), quiere que el usuario navegue a alguna otra página.htm cuando hace clic en el enlace. Pero si tienen JavaScript habilitado, entonces desea mostrar un diálogo modal y no navegar fuera de la página. Se podría manejar esta impidiendo que el comportamiento por defecto del anclaje/enlace y mostrar el modal como tal:

$("#navLink").click(function(e) { 
    e.preventDefault(); //this prevents the user from navigating to the someOtherPage.htm 
    $("#hiddenDiv").dialog({ 
    //options 
    }); //show the dialog 
}); 

Así que tener ese parámetro disponible le permite, entre otras cosas descritas en otras respuestas, prevenir el comportamiento predeterminado de el elemento seleccionado.

Espero que esto ayude!

Answer 4

Estoy hablando en teoría en cuanto a No soy un experto, pero he conseguido el resultado deseado mediante el uso de que el pequeño (e), que no tiene por qué ser un e lol

lo he descubierto. Es una manera de pasar el mismo evento de una función a otra.

En términos más simples. Quería que la navegación de la página fuera una función de desplazamiento elástico, sin embargo, quería que la página navegara "y" quería que se pudiera hacer clic en la misma navegación en determinadas condiciones. También quería la misma navegación dinámica desde otros eventos de clic que no eran enlaces. Para mantener el objetivo actual y seguir usando la función de navegación, tuve que configurar el pequeño (e) porque jQuery perderá el alcance de $ (this) como el mismo objetivo de la función lol. Aquí hay un ejemplo rápido.

function navigate_to_page(e){ 
var target = $(e.currentTarget).attr('href'); //--This is the same as $(this) but more static to bring out of it's scope 
    $('html, body').animate({ 
    'scrollTop':$(target).offset().top-0, 
    'scrollLeft': $(target).offset().left-$(window).width()*0.0}, 2000, 'easeOutBounce'); 
} 

no deje que la jerga te confunda. Es solo una simple animación de desplazamiento de página. Lo que debe tener en cuenta es e.currentTarget. e es nuestra variable y currentTarget es un jQuery equivalente a $ (esto) por lo que las juntas son una función Globular $ (this). Ahora me llaman por otra función con condistions al igual que

$('#myNavigationDiv a').on('mouseenter', function(e){ 
    if($(myCondition) === true){ 
     return false; 
     }else{ 
     navigate_to_page(e); 
     } 
    }); 

Vea cómo el pequeño (e) unido todo junto?

Ahora puede sustituir (e) a (whateveryouwant). Al invocar e en ambas funciones, coincidió con e .Torrent actual y puede aplicar esto a cualquier función específica detallada que necesite y ahorrarse LITERALMENTE las páginas del código lol