¿Cuál es la mejor práctica para botones con funcionalidad JavaScript?

Debe ejercer las siguientes formas de activar y manejar entradas HTML:

  • atributo ‘onclick’ establecido en la etiqueta HTML en sí,
    (Lo mismo para los formularios: onsubmit, quizás onfocus)
    (Si lo desea, lo mismo para eventos de teclado: onkeyup)
  • Uso de la función JS .click () para activar un clic del mouse

Al hacer esto, ejercita sus habilidades en el nivel básico de HTML + JS.

También puede practicar en jQuery, que también se recomienda una vez que comprenda la capa base HTML + JS debajo:

  • Use las funciones de jQ en () o submit () o haga clic () para adjuntar devoluciones de llamada del controlador a botones u otras entradas

Simplemente cree un archivo HTML y sirvalo localmente en su navegador. Abra el depurador y avance si es necesario.

Aquí hay un fragmento de código que creé para una pregunta relacionada (practicando devoluciones de llamada), tal vez sea útil aquí también. Observe el atributo onclick en HTML en la línea 62 y el controlador .submit establecido en jQuery en la línea 13. A partir de ahí, los controladores simplemente configuran un temporizador y realizan una solicitud Ajax, respectivamente, cada uno de los cuales tiene una devolución de llamada que se ejecuta más tarde. Este podría haber sido un ejemplo más mínimo, pero quería que fuera un archivo ejecutable completo con una función razonable.

       Demostración de entrada / devolución de llamada     "uso estricto";  $ (document) .ready (function () {$ ('# city_form'). submit (WeatherClickHandler);});  función WeatherClickHandler () {var base_api = 'http://api.openweathermap.org/data/2.5/weather' var city = '? q =' + $ ('# city_name'). val ();  var id = '& APPID = ceef854a5379c3c69f1ea9f39ab17c7e';  var options = '& units = imperial';  var full_url = base_api + ciudad + id + opciones;  $ .get (full_url, WeatherCallback, 'json');  $ ('# city_name'). val ('');  $ ('# weather'). html ('\ n');  falso retorno;  // devuelve falso desde el controlador de envío, por lo que la página no se actualiza} función WeatherCallback (respuesta) {var weather_str;  if (response.main && response.weather && response.weather.length) {weather_str = `$ {response.name}: $ {response.main.temp} grados Fahrenheit y $ {response.weather [0] .description} `;  } $ ('# clima'). html (weather_str);  } función OneShotClickHandler () {const msec = $ ('# msec_delay'). val ();  const startTime = performance.now ();  setTimeout (OneShotTimerCallback, msec, startTime);  $ ('# msec_delay'). val ('');  } función OneShotTimerCallback (startTime) {let oneShotStr = `Devolución de llamada del temporizador recibida después de $ {Math.trunc ((performance.now () - startTime) * 1000) / 1000} milisegundos.`;  $ ('# oneshot_time'). html (oneShotStr);  }                

Un enlace implica que navegará a alguna parte, y un rastreador también podría interpretarlo de esa manera.

Pruebe en su lugar una etiqueta de entrada con el botón de tipo: