llamar a la función javascript en el clic del hipervínculo

Estoy creando dinámicamente un hipervínculo en el código c # detrás del archivo de ASP.NET. Necesito llamar a una función de JavaScript al hacer clic en el cliente. ¿Cómo logro esto?

Aún más ordenado, en lugar de typical href="#"o href="javascript:void"o href="whatever", creo que esto tiene mucho más sentido:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Si Javascript falla, hay algunos comentarios. Además, se elimina el comportamiento errático (salto de página en el caso de href="#", visitando la misma página en el caso de href="").

La respuesta más simple de todas es ...

<a href="javascript:alert('You clicked!')">My link</a>

O para responder a la pregunta de llamar a una función de JavaScript:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>

Con el parámetro onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

La respuesta de JQuery. Dado que JavaScript se inventó para desarrollar JQuery, le doy un ejemplo en JQuery haciendo esto:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

Prefiero usar el método onclick en lugar del href para los hipervínculos javascript. Y siempre use alertas para determinar qué valor tiene.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

También podría usarse en etiquetas de entrada, por ejemplo.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

Idealmente, evitaría generar enlaces en su código subyacente por completo, ya que su código deberá volver a compilarse cada vez que desee realizar un cambio en el 'marcado' de cada uno de esos enlaces. Si tiene que hacerlo, no incrustaría sus 'llamadas' de javascript dentro de su HTML, es una mala práctica en general, su marcado debe describir su documento, no lo que hace, ese es el trabajo de su javascript.

Use un enfoque en el que tenga una identificación específica para cada elemento (o clase si es su funcionalidad común) y luego use la Mejora progresiva para agregar los controladores de eventos, algo como:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

De esa manera, su código no se romperá para los usuarios con JS deshabilitado y tendrá una clara separación de preocupaciones.

Espero que sea de utilidad.

En general, recomendaría usar element.attachEvent (IE) o element.addEventListener (otros navegadores) en lugar de configurar el evento onclick directamente, ya que este último reemplazará cualquier controlador de eventos existente para ese elemento.

attachEvent / addEventListening permiten la creación de múltiples controladores de eventos.

Utilice el onclickatributo HTML .

El onclickcontrolador de eventos captura un evento de clic del botón del mouse de los usuarios en el elemento al que onclickse aplica el atributo. Esta acción generalmente da como resultado una llamada a un método de secuencia de comandos como una función de JavaScript [...]

Si no espera a que se cargue la página, no podrá seleccionar el elemento por id. Esta solución debería funcionar para cualquiera que tenga problemas para ejecutar el código

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>