{"id":63971,"date":"2019-08-05T17:39:42","date_gmt":"2019-08-05T12:09:42","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=63971"},"modified":"2021-02-17T21:32:23","modified_gmt":"2021-02-17T16:02:23","slug":"javascript-events","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-events\/","title":{"rendered":"JavaScript Events &#8211; Explore Different Concepts and Ways of using it"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1458,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/HTML&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251203082718\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/HTML&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:35:14&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-12 10:17:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-15 14:18:41&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-19 11:46:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-22 17:27:55&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-26 04:39:37&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-29 06:13:40&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-01 12:33:21&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-04 14:41:14&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-07 14:50:26&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-12 03:49:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-15 06:39:11&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-18 15:51:01&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-22 09:06:31&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-25 11:36:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-28 12:18:23&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-01 11:00:41&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-04 11:52:09&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-07 19:34:48&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-11 08:06:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-14 11:08:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-17 13:16:01&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-21 16:30:16&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-24 21:04:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-28 07:34:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-03 16:14:19&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-06 23:42:31&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-10 08:10:12&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-03-14 17:30:14&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-18 05:20:31&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-21 19:42:45&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-25 09:27:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-29 22:18:37&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-03 07:41:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-07 06:52:04&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-12 02:53:22&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-15 05:14:32&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-18 17:56:48&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-22 12:28:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-25 20:51:41&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-04-29 09:43:32&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-02 16:58:16&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-06 11:49:55&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-09 16:40:31&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-16 02:36:06&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-19 10:01:10&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-22 11:06:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-25 15:17:36&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-28 18:29:32&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-01 18:07:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-04 21:02:14&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-08 08:56:21&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-08 08:56:21&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>We all eagerly waited for the lunch break in school, didn\u2019t you? We just waited for the bell to ring, indicating the end of the class. As soon as the bell rang, we acted: packed our bags, took out our lunch boxes, exchanged the previous day\u2019s stories with our pals. You can understand the concept of JavaScript Events easily with this example. Because the bell ringing was an event and our actions were the reactions to that event. The objective of this JavaScript tutorial is to grasp the basics of what events are, how they work, and how they react in different programming environments. JavaScript events provide a dynamic interface to a webpage, adding interactivity to your page.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65994\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png\" alt=\"Ways of Using JavaScript Events\" width=\"801\" height=\"420\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png 801w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events-150x79.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events-300x157.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events-768x403.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events-520x273.png 520w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/a><\/p>\n<p>So, let&#8217;s start with the best tutorial on JavaScript Events.<\/p>\n<h2>JavaScript Events<\/h2>\n<p>Any actions that you perform or any occurrence on the browser is an<strong> event<\/strong>.<em> Your page loads, you click on the page, you navigate the page, an error occurs; all of these are events<\/em>. The system tells you about them and you can add responses to them if you choose to. There are a lot of events available in JavaScript that you can respond to.<\/p>\n<p>JavaScript provides a feature called <strong>event handler<\/strong> that helps you to respond to the events. An event handler is a block of code, usually a user-defined <em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-function\/\">JavaScript Function<\/a><\/strong><\/em>, that runs when the event fires. When we define this block of code, we say that we are <strong>registering an event handler.<\/strong> They are sometimes interchangeably called <strong>event listeners<\/strong>, but they are different from each other and work together. The event handlers <em>listen<\/em> for the event to happen and the event handler is the code that runs in response to the event happening. You can add event handlers with either single quotes or double-quotes.<\/p>\n<h3>Ways of Using Web Events in JavaScript<\/h3>\n<p><strong>How events trigger JavaScript code?<\/strong><\/p>\n<p>You can trigger JavaScript from HTML pages in three steps:<\/p>\n<ul>\n<li>Select the element node(s) for which you want the JavaScript script to respond.<\/li>\n<li>Indicate which event will trigger the response (binding event to the DOM node).<\/li>\n<li>Define the code you want to execute when the event occurs.<\/li>\n<\/ul>\n<p>There are multiple ways by which you can add an event listener in your code that will execute when an event fires. If you don\u2019t know any event used in this tutorial, don\u2019t worry. DataFlair\u2019s next <em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-event-types\/\">JavaScript tutorial on Event types<\/a><\/strong><\/em> lists all the events you need to know. For now, we have a task for you.<\/p>\n<p>We want to create a button named<strong> \u201cDataFlair\u201d<\/strong> that changes its color when clicked. We will use different event handlers to achieve this task. This will help us compare the basics of the JavaScript events, helping us understand them better. The HTML code given below is common for all the programs. All you need to do is change the JavaScript code in your program.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\"> &lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;!-- CSS styling --&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n      button{\r\n        max-width: auto;\r\n        border: 3px solid black;\r\n        font-size: xx-large;\r\n        margin: auto;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;button onclick = \"changeColor()\"&gt;DataFlair&lt;\/button&gt; &lt;!-- function call --&gt;\r\n    &lt;p&gt;&lt;\/p&gt;\r\n\r\n    &lt;!-- JavaScript code --&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65590\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event.jpg\" alt=\"JavaScript event\" width=\"1297\" height=\"739\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event.jpg 1297w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event-150x85.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event-1024x583.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/JavaScript-event-520x296.jpg 520w\" sizes=\"auto, (max-width: 1297px) 100vw, 1297px\" \/><\/a><\/p>\n<h3>1. Inline\/HTML Event Handlers<\/h3>\n<p>This is bad-practice, but since you see it in older browsers, you need to be aware of it. This method is no longer in use; it is always better to separate the JavaScript from the <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML\">HTML<\/a>.<\/p>\n<p>The attribute name matches the event names; their value calls the function linked to that event. The syntax to recognize an HTML event handler looks like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;element attribute = \u201cfunctionName()\u201d&gt;<\/pre>\n<p>Let\u2019s solve the\u00a0above problem with the help of this method. The code below uses HTML event handlers to add events in the HTML.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\"&gt;\r\n      function changeColor(){\r\n        document.querySelector(\"button\").style.backgroundColor = \"blue\"; \/\/change background color\r\n        document.querySelector(\"button\").style.color = \"white\"; \/\/change font color\r\n        document.querySelector(\"p\").innerHTML = \"Great! The button changed its color.\" \/\/add text\r\n      }\r\n    &lt;\/script&gt;\r\n<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65591 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1.jpg\" alt=\"event_handler 1 - JavaScript Events\" width=\"1299\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Before click:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65592 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1.jpg\" alt=\"event_handler output - JavaScript Events\" width=\"1298\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op1-520x297.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><br \/>\n<strong>After click:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65593 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2.jpg\" alt=\"event_handler output 2 - JavaScript Events\" width=\"1299\" height=\"740\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2-150x85.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2-1024x583.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event_handler-1-op2-520x296.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>2. Traditional DOM Event Handlers<\/h3>\n<p>DOM event handlers, introduced in the original specification for the DOM, is an alternative to add an event handler to any element. This method separates JavaScript from the HTML, thus is preferred over Inline event handlers. All the major browsers support this approach. The drawback is that for any event, you can attach only one function. As a result, if a page uses more than one script, and both scripts respond to the same event, then one or both of the scripts may not work as intended.<\/p>\n<p><em><strong>Explore a little more with our tutorial on JavaScript DOM<\/strong><\/em><\/p>\n<p>The syntax of adding an event is something like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">element.onevent = functionName;<\/pre>\n<p>Did you notice that we skipped the parenthesis with the function name? This is because when a function is called, a parenthesis following its name tells the interpreter to <strong>\u201crun this code now\u201d.<\/strong> We want the function to execute only when the event fires.<\/p>\n<p>The JavaScript code, shown below, will use traditional DOM handlers to produce the desired output.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\"&gt;\r\n      var btn = document.querySelector(\"button\");\r\n      function changeColor(){\r\n        btn.style.backgroundColor = \"blue\"; \/\/change background color\r\n        btn.style.color = \"white\"; \/\/change font color\r\n        document.querySelector(\"p\").innerHTML = \"Great! The button changed its color.\" \/\/add text\r\n      }\r\n      btn.onclick = changeColor; \/\/event handler\r\n    &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65594 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler.jpg\" alt=\"traditional DOM event Handler - JavaScript Events\" width=\"1298\" height=\"744\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler-768x440.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler-1024x587.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/traditional-DOM-event-Handler-520x298.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<h3>3. addEventListener() and removeEventListener()<\/h3>\n<p>These are the favored way of adding an event handler, introduced in an update to the DOM (DOM level2, in the year 2000). Unlike traditional DOM event handlers, these allow a single event to trigger multiple functions. Thus, there are fewer conflicts between the multiple scripts that run on the same page. This technique doesn\u2019t work with the IE8 or earlier IE versions. These differences in browser support are resolved by using jQuery.<\/p>\n<p>You can add an event listener to your event with the following syntax:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">element.addEventListener(\u201cevent\u201d, functionName [, Boolean]);<\/pre>\n<p>Or you can remove the event listener by using the syntax below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">element.removeEventListener(\u201cevent\u201d, functionName [, Boolean]);<\/pre>\n<p>By default, the value of Boolean is set to false, for event capturing. You can set the value to true if you want to change the event flow.<\/p>\n<p>The code below explains the use of this approach to accomplish our desired output (adding an event listener).<\/p>\n<p><em><strong>You must explore the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-data-types\/\">tutorial on\u00a0JavaScript Data Types<\/a><\/strong><\/em><\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\"&gt;\r\n      var btn = document.querySelector(\"button\");\r\n      function changeColor(){\r\n        btn.style.backgroundColor = \"blue\"; \/\/change background color\r\n        btn.style.color = \"white\"; \/\/change font color\r\n        document.querySelector(\"p\").innerHTML = \"Great! The button changed its color.\" \/\/add text\r\n      }\r\n      btn.addEventListener(\"click\", changeColor); \/\/adds event listener\r\n    &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65597 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener.jpg\" alt=\"addremove event listener - JavaScript Events\" width=\"1298\" height=\"746\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener-768x441.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener-1024x589.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/addremove-event-listener-520x299.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p>To remove the event listener from your event, use the following code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">btn.removeEventListener(\u201cclick, changeColor\u201d);<\/pre>\n<h3>4. Using Parameters with Event Handlers and Listeners<\/h3>\n<p>While programming, there may occur a situation when you need a function to work with parameters. The above method of adding an event doesn&#8217;t provide us with that facility. To remedy that, we use <strong>anonymous functions<\/strong> i.e., functions with no name.<\/p>\n<p>Since parenthesis follows the function call (to pass the arguments), the code runs immediately. We wrap the function call in an anonymous function so it only runs when the event triggers it. The syntax of this approach is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">element.addEventListener(\u201cevent\u201d, function(){ functionCall(parameters); }, Boolean);<\/pre>\n<p>We don\u2019t need any parameter for the problem that we were solving for the above approaches, but we will use this technique for the same task just to understand how the code runs.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\"&gt;\r\n      var btn = document.querySelector(\"button\");\r\n      function changeColor(anyParameter){ \/\/function declaration\r\n        btn.style.backgroundColor = \"blue\"; \/\/change background color\r\n        btn.style.color = \"white\"; \/\/change font color\r\n        document.querySelector(\"p\").innerHTML = \"Great! The button changed its color.\" \/\/add text\r\n      }\r\n      btn.addEventListener(\"click\", function(){\r\n        changeColor(1); \/\/function with a parameter\r\n      }, false); \/\/adds event listener with anonymous function\r\n    &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65600 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters.jpg\" alt=\"using Parameters - JavaScript Events\" width=\"1298\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/using-Parameters-520x297.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<h3>JavaScript Event Flow<\/h3>\n<p>You won\u2019t come across this topic often, but it can cause serious problems in your code if you don\u2019t understand it. There are two ways in which an event can function:<\/p>\n<ul>\n<li>Event Bubbling<\/li>\n<li>Event Capturing<\/li>\n<\/ul>\n<p>Understanding these mechanisms will simplify what happens when event handlers are activated on an element.<\/p>\n<h4>Why the event flow matters?<\/h4>\n<p>The flow of events only really matters when the code has event handlers on both an element and one of its ancestor\/descendant elements. If the Boolean value is true, it sets the <strong>capturing<\/strong> phase but if false, it is the <strong>bubbling<\/strong> phase.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/capturing-and-bubbling-phase.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66954\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/capturing-and-bubbling-phase.png\" alt=\"capturing and bubbling phase - JavaScript Events\" width=\"404\" height=\"208\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/capturing-and-bubbling-phase.png 404w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/capturing-and-bubbling-phase-150x77.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/capturing-and-bubbling-phase-300x154.png 300w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<h4>Event Bubbling<\/h4>\n<p>The event flows outwards from the most to the least specific node.<\/p>\n<h4>Event Capturing<\/h4>\n<p>The event flows inwards from the least to the most specific node.<\/p>\n<h3>Other Event Concepts in JavaScript<\/h3>\n<h4>1. Event Objects<\/h4>\n<p>When an event fires, the event object returns information about the event, and element the event happened upon. This object is passed to any function that is the event handler\/listener. When you pass arguments to a named function, the event object is automatically passed to the anonymous wrapper function. To access it, all you need to do is specify it as a parameter of the named function. The most common parameter name is <strong>e<\/strong> (event). Others include <strong>event<\/strong> and <strong>evt.<\/strong><\/p>\n<p>To view the details of the event object of your event, use the following code.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/javascript\"&gt;\r\n      var btn = document.querySelector(\"button\");\r\n      function changeColor(e){\r\n        btn.style.backgroundColor = \"blue\"; \/\/change background color\r\n        btn.style.color = \"white\"; \/\/change font color\r\n        document.querySelector(\"p\").innerHTML = \"Great! The button changed its color.\" \/\/add text\r\n        console.log(e);\r\n      }\r\n      btn.addEventListener(\"click\", changeColor); \/\/adds event listener\r\n    &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65601 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object.jpg\" alt=\"event object - JavaScript Events\" width=\"1300\" height=\"744\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-768x440.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-1024x586.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-520x298.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65602 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op.jpg\" alt=\"event object op\" width=\"1300\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/event-object-op-520x296.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><em><strong>Wait! Did you check the article on <a href=\"https:\/\/data-flair.training\/blogs\/javascript-objects\/\">JavaScript Objects<\/a>?<\/strong><\/em><\/p>\n<p>The event object has the following properties and methods.<\/p>\n<p><strong>Properties:<\/strong><\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Property<\/strong><\/td>\n<td style=\"text-align: center\"><strong>IE5-8 Equivalent<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Purpose<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">target<\/td>\n<td style=\"text-align: center\">srcElement<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It specifies the target of the event (most specific element).<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">type<\/td>\n<td style=\"text-align: center\">type<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It specifies the type of event fired.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">cancelable<\/td>\n<td style=\"text-align: center\">Not supported<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It specifies whether you can cancel the default behavior of an element.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Methods:<\/strong><\/p>\n<table dir=\"ltr\">\n<colgroup>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Method<\/strong><\/td>\n<td style=\"text-align: center\"><strong>IE5-8 Equivalent Property<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Purpose<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">preventDefault()<\/td>\n<td style=\"text-align: center\">returnValue<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It cancels the default behavior of the event (if possible).<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\">stopPropogation()<\/td>\n<td style=\"text-align: center\">cancelBubble<\/td>\n<td>\n<div>\n<div style=\"text-align: center\">It stops any further bubbling\/ capturing of the event.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>2. Event Delegation<\/h4>\n<p>If the page comprises of a lot of elements the user can interact with, adding event listeners to every element can use a great deal of memory and slow down performance. JavaScript helps you prevent this by using <strong>event delegation<\/strong>. The concept of event delegation relies on the concept of event bubbling. To use it, you can set your event listener to the parent element of all the elements for which you want the event attached. In other words, if you want to add event listeners to all the<strong> &lt;li&gt;<\/strong> elements, instead of adding an event to every element, you can handle the event on the <strong>&lt;ul&gt;<\/strong> element and bubble it to all the list items. Here, we delegated the job of the event listener to the parent of the element.<\/p>\n<p>The advantages of using event delegation in your code include:<\/p>\n<ul>\n<li>It easily works with new elements; you don\u2019t need to add event listeners with them.<\/li>\n<li>It solves the limitations with the help of <strong>\u201cthis\u201d<\/strong> keyword. We can accurately determine\u00a0the event was attached to which element.<\/li>\n<li>It simplifies the code as it contains fewer functions, helping maintainability.<\/li>\n<\/ul>\n<h2>Summary<\/h2>\n<p>Here we come to the end of our tutorial on JavaScript Events. In this article, we covered the various terminologies of JavaScript Events, ways of using web events, event flow, event objects and, event delegation. We have described the different\u00a0<em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-event-types\/\">types of JavaScript Events<\/a> <\/strong><\/em>in the next tutorial. You must definitely check it.<\/p>\n<p>Hope you liked our article.<\/p>\n<p>If there is anything you didn&#8217;t understand, do let us know through the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all eagerly waited for the lunch break in school, didn\u2019t you? We just waited for the bell to ring, indicating the end of the class. As soon as the bell rang, we acted:&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":65994,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20803,20802,20649,20647,20801],"class_list":["post-63971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript-event-concepts","tag-javascript-event-flow","tag-javascript-event-objects","tag-javascript-events","tag-javascript-web-events"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Events - Explore Different Concepts and Ways of using it - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn everything about the JavaScript events along with ways of using web events, event flow and event concepts in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-events\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Events - Explore Different Concepts and Ways of using it - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn everything about the JavaScript events along with ways of using web events, event flow and event concepts in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-events\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T12:09:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-17T16:02:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png\" \/>\n\t<meta property=\"og:image:width\" content=\"801\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Events - Explore Different Concepts and Ways of using it - DataFlair","description":"Learn everything about the JavaScript events along with ways of using web events, event flow and event concepts in JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-events\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Events - Explore Different Concepts and Ways of using it - DataFlair","og_description":"Learn everything about the JavaScript events along with ways of using web events, event flow and event concepts in JavaScript.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-events\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-05T12:09:42+00:00","article_modified_time":"2021-02-17T16:02:23+00:00","og_image":[{"width":801,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png","type":"image\/png"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Events &#8211; Explore Different Concepts and Ways of using it","datePublished":"2019-08-05T12:09:42+00:00","dateModified":"2021-02-17T16:02:23+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/"},"wordCount":1660,"commentCount":1,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png","keywords":["JavaScript Event Concepts","JavaScript Event Flow","JavaScript Event Objects","JavaScript Events","JavaScript Web Events"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-events\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/","url":"https:\/\/data-flair.training\/blogs\/javascript-events\/","name":"JavaScript Events - Explore Different Concepts and Ways of using it - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png","datePublished":"2019-08-05T12:09:42+00:00","dateModified":"2021-02-17T16:02:23+00:00","description":"Learn everything about the JavaScript events along with ways of using web events, event flow and event concepts in JavaScript.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-events\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/Ways-of-Using-JavaScript-Events.png","width":801,"height":420,"caption":"Ways of Using JavaScript Events"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-events\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Events &#8211; Explore Different Concepts and Ways of using it"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=63971"}],"version-history":[{"count":10,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63971\/revisions"}],"predecessor-version":[{"id":66939,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63971\/revisions\/66939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/65994"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=63971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=63971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=63971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}