{"id":22865,"date":"2024-01-19T04:28:47","date_gmt":"2024-01-19T03:28:47","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/scripting-de-eventos-html-mejora-la-interactividad-de-tu-pagina-web\/"},"modified":"2024-06-03T17:29:36","modified_gmt":"2024-06-03T16:29:36","slug":"scripting-de-eventos-html-mejora-la-interactividad-de-tu-pagina-web","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/","title":{"rendered":"HTML event scripting: Improve the interactivity of your website"},"content":{"rendered":"<p>The HTML markup language is the fundamental basis of any web page. However, to provide a more interactive experience to users, it is necessary to use HTML event scripting. In this article, we are going to explore how you can use this technique to improve the interactivity of your website and provide a more dynamic experience for your visitors.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#%C2%BFQue_es_el_scripting_de_eventos_HTML\" >What is HTML event scripting?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#Mejora_la_interactividad_con_botones_en_HTML\" >Improve interactivity with HTML buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#Utilizando_el_scripting_de_eventos_HTML_en_otros_elementos\" >Using HTML event scripting on other elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#1_%C2%BFQue_es_el_scripting_de_eventos_HTML\" >1. What is HTML event scripting?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#2_%C2%BFComo_utilizar_el_evento_onclick_en_un_boton_HTML\" >2. How to use the onclick event on an HTML button?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#3_%C2%BFSe_puede_utilizar_el_scripting_de_eventos_HTML_en_otros_elementos_ademas_de_botones\" >3. Can HTML event scripting be used on elements other than buttons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#4_%C2%BFEs_necesario_conocer_JavaScript_para_utilizar_el_scripting_de_eventos_HTML\" >4. Do I need to know JavaScript to use HTML event scripting?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-event-scripting-improves-the-interactivity-of-your-website\/#5_%C2%BFExisten_otras_propiedades_de_eventos_HTML_ademas_de_onclick_y_onmouseover\" >5. Are there other HTML event properties besides onclick and onmouseover?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_scripting_de_eventos_HTML\"><\/span>What is HTML event scripting?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML event scripting is a technique that allows specific actions or functions to be executed in response to user-generated events on a web page. These events can include the click of a button, the entry of text into a form, the movement of the mouse, among others. By using HTML event scripting, you can control how your web page elements interact with users.<\/p>\n<p>To use HTML event scripting, the property is used <code>on<\/code> followed by the name of the event and the action you want to execute. For example, if you want to run a function when a button is clicked, you can use the property <code>onclick<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mejora_la_interactividad_con_botones_en_HTML\"><\/span>Improve interactivity with HTML buttons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the most common elements on a web page are buttons. With HTML event scripting, you can improve the interactivity of your page by controlling what happens when a button is clicked.<\/p>\n<p>For example, if you want to change the background color of an element when a button is clicked, you can use the event <code>onclick<\/code> and a JavaScript function to achieve it. Here is an example of how you can implement it:<\/p>\n<pre>\n<button>Change background color<\/button>\n<\/pre>\n<p>In the previous example, a function called <code>changeBackgroundColor()<\/code> which changes the background color of an element identified as &quot;myElement&quot; to red. When using the event <code>onclick<\/code> on the button, this function is called when it is clicked.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Utilizando_el_scripting_de_eventos_HTML_en_otros_elementos\"><\/span>Using HTML event scripting on other elements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aside from buttons, you can also use HTML event scripting on other elements of your web page, such as links, forms, and images. For example, you can use the event <code>onmouseover<\/code> to display additional information when the user hovers over an image or link.<\/p>\n<p>Here is an example of how you can use the event <code>onmouseover<\/code>:<\/p>\n<pre>\n&lt;img src=&quot;imagen.jpg&quot; onmouseover=&quot;mostrarDescripcion()&quot;&gt;\n\n&lt;script&gt;\n   function mostrarDescripcion() {\n      var descripcion = document.getElementById(&quot;descripcion&quot;);\n      descripcion.style.visibility = &quot;visible&quot;;\n   }\n&lt;\/script&gt;\n<\/pre>\n<p>In this example, when the user hovers over an image, the function is called <code>showDescription()<\/code>, which displays a hidden description previously defined in the element with identifier &quot;description&quot;.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML event scripting is a powerful technique that allows you to improve the interactivity of your web page. With it, you can control how your page elements interact with users and provide a more dynamic and personalized experience. By using properties like <code>onclick<\/code> y <code>onmouseover<\/code>, you can create custom functions that run in response to specific events, such as clicking a button or hovering over an image. Experiment with HTML event scripting and take your website to the next level of interactivity.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_%C2%BFQue_es_el_scripting_de_eventos_HTML\"><\/span>1. What is HTML event scripting?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTML event scripting is a technique that allows you to execute specific actions or functions in response to user-generated events on a web page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%C2%BFComo_utilizar_el_evento_onclick_en_un_boton_HTML\"><\/span>2. How to use the onclick event on an HTML button?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can use the onclick event on an HTML button by using the onclick property followed by the action you want to execute. For example: <code><button>click<\/button><\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_%C2%BFSe_puede_utilizar_el_scripting_de_eventos_HTML_en_otros_elementos_ademas_de_botones\"><\/span>3. Can HTML event scripting be used on elements other than buttons?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, you can use HTML event scripting on other elements of a web page, such as links, forms, and images. For example, you can use the onmouseover event to display additional information when the user hovers over an image or link.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_%C2%BFEs_necesario_conocer_JavaScript_para_utilizar_el_scripting_de_eventos_HTML\"><\/span>4. Do I need to know JavaScript to use HTML event scripting?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, since HTML event scripting uses JavaScript code to define actions to execute in response to events. It is important to have basic knowledge of JavaScript to use this technique correctly.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_%C2%BFExisten_otras_propiedades_de_eventos_HTML_ademas_de_onclick_y_onmouseover\"><\/span>5. Are there other HTML event properties besides onclick and onmouseover?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, there are many different HTML event properties, such as onkeydown, onkeyup, onchange, and more. Each of them is used to handle a specific type of event on a web page.<\/p>\n<p>I hope this article has given you a complete introduction to HTML event scripting and how you can use it to improve the interactivity of your web page. If you want to learn more about programming and marketing, feel free to visit my <a href=\"https:\/\/nelkodev.com\/en\/\">Blog<\/a> at nelkodev.com. You can also contact me through my contact form <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">here<\/a> or consult my portfolio at <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">this link<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>El lenguaje de marcado HTML es la base fundamental de cualquier p\u00e1gina web. Sin embargo, para proporcionar una experiencia m\u00e1s interactiva a los usuarios, es necesario utilizar el scripting de eventos HTML. En este art\u00edculo, vamos a explorar c\u00f3mo puedes utilizar esta t\u00e9cnica para mejorar la interactividad de tu p\u00e1gina web y brindar una experiencia [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[205,551,475,768,49,44,769,47],"class_list":["post-22865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-blog","tag-eventos","tag-html","tag-interactividad","tag-mejora","tag-pagina","tag-scripting","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22865"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22866"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}