{"id":382,"date":"2018-06-16T23:17:36","date_gmt":"2018-06-16T23:17:36","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=382"},"modified":"2018-06-16T23:17:36","modified_gmt":"2018-06-16T23:17:36","slug":"how-to-handle-event-handling-in-javascript-examples-and-all","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/06\/16\/how-to-handle-event-handling-in-javascript-examples-and-all\/","title":{"rendered":"How to handle event handling in JavaScript (examples and\u00a0all)"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>
Photo by\u00a0Sergey Zolkin<\/a>\u00a0on\u00a0Unsplash<\/a><\/figcaption><\/figure>\n

In this blog, I will try to make clear the fundamentals of the event handling mechanism in JavaScript, without the help of any external library like Jquery\/React\/Vue.<\/p>\n

I will be explaining the following topics in this article:<\/p>\n

    \n
  1. The\u00a0document<\/strong>\u00a0and\u00a0window<\/strong>\u00a0objects, and adding\u00a0Event Listeners\u00a0<\/strong>to them.<\/li>\n
  2. The\u00a0Event.preventDefault()<\/strong>\u00a0method and it\u2019s usage.<\/li>\n
  3. The\u00a0Event.stopPropagation()\u00a0<\/strong>method with an example.<\/li>\n
  4. How to remove\u00a0<\/strong>an event\u00a0listener<\/strong>\u00a0from an element.<\/li>\n<\/ol>\n

    Document<\/strong>\u00a0and\u00a0window\u00a0<\/strong>objects with\u00a0Event Listeners<\/strong><\/h3>\n

    The Window object represents the tab. In case you are reading this blog on your corresponding browser, then your current tab represents the Window object.<\/p>\n

    The window object has access to such information as the toolbar, height and width of the window, prompts, and alerts. Let\u2019s see how we can add an event listener (mousedown) to the window object and analyze some of its properties.<\/p>\n

    How to add the listener on the window\u00a0object<\/strong><\/h4>\n

    The\u00a0addEventListener<\/strong>\u00a0method is the most preferred way to add an event listener to\u00a0window<\/strong>,\u00a0document<\/strong>\u00a0or any other\u00a0element<\/strong>\u00a0in the DOM.<\/p>\n

    There is one more way called \u201con\u201d property onclick, onmouseover, and so on. But is not as useful, as it does not allow us to add multiple event listeners on the same element. The other methods allow it.<\/p>\n

    An\u00a0event<\/strong>\u00a0object is passed as an argument (optional) to the handler which contains all the information related to the event (in our case, mousedown) on the window.<\/p>\n

    Open the developer tools (Inspect Element) on this page and copy paste the following code in the console panel and hit enter.<\/p>\n

    window.addEventListener(\"mousedown\",function(event){\r\n alert(\"window\");\r\n console.log(event);\r\n});<\/pre>\n
    After that, you can go over to any section of the current tab and\u00a0right click\u00a0<\/strong>to see the console and the info related to this event, as shown below in the snapshot.<\/p>\n
    Note<\/strong>: If you go to any other tab and right click, then this event will not get fired as it belongs to this tab (Window object) only.<\/p>\n<\/div>\n
    \n
    \n
    \n
    <\/div>\n
    <\/canvas><\/div>\n<\/div>\n<\/figure>\n<\/div>\n
    \n
    The details of the mousedown event<\/h4>\n
    In the next few lines, I will explain some of the important captured property corresponding to the\u00a0mousedown<\/strong>\u00a0event we just performed.<\/p>\n
    button<\/strong>: As this was the mousedown event, it will tell you the button you clicked. For the mouse, Left, middle, and right correspond to 0, 1, and 2 respectively. If you click the right button, you can see the value 2.<\/p>\n
    clientX<\/strong>\u00a0and\u00a0clientY<\/strong>: Position relative to the upper left of the content area (Viewport). Just analyze the value of these properties with the place you clicked, and you can see how they\u2019re related. Even if you scroll down the page, these properties remain the same. ScreenX and ScreenY reference from the top left of the screen (Monitor).<\/p>\n
    altkey \/ ctrlkey<\/strong>: If you keep any of these keys pressed while performing your right click operation, then you can see these values are true. Otherwise, they\u2019re false as in our case.<\/p>\n
    target:\u00a0<\/strong>It corresponds to the element you performed the action upon. Whatever element you might have clicked on, you can see the information corresponding to this property in the console<\/p>\n
    What is a document\u00a0object<\/strong>?<\/h4>\n
    The document consists of what is inside the inner window. The\u00a0document<\/strong>object<\/strong>\u00a0is the root of every node in the DOM. If you are loading an HTML page in the browser, then the document represents that entire page.<\/p>\n
    The Event.preventDefault()<\/strong>\u00a0method and its\u00a0usage<\/h3>\n
    Sometime we don\u2019t want an HTML element to behave in the way it is supposed to behave in default. In such a case, we can use this method.<\/p>\n
    Example<\/strong>: Clicking the anchor element will make the browser redirect to that page by default. Let\u2019s try to avoid that.<\/p>\n
    <html>\r\n<body><\/pre>\n
    <a href=\"https:\/\/google.com\/<\/a>\">Google<\/a><\/pre>\n
    <script><\/pre>\n
    let link = document.querySelector(\"a\"); \/\/ It is the method to access the first matched element<\/pre>\n
    link.addEventListener(\"click\", function(event){<\/pre>\n
    console.log(\"Redirecting Stopped\");<\/pre>\n
    event.preventDefault();<\/pre>\n
    });<\/pre>\n
    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
    You can create an HTML file and check out this code.<\/p>\n
    The Event.stopPropagation()\u00a0<\/strong>method<\/h3>\n
    Events flow outwards.<\/strong>\u00a0There are certain cases, such as when you have nested elements and you perform some event on a child and it ends up performing some action on the parent, too, that you want to avoid. In such cases, this method is a useful one.<\/p>\n
    It sounds bit confusing, but I hope the below example will make it clear to you.<\/p>\n
    Imagine you have a button inside a paragraph and you have attached a mousedown event to both of them. You want to achieve the following use cases:<\/p>\n
      \n
    1. If you right click the button, then it should show that it has been clicked and does not propagate to the parent element (that is, the paragraph).<\/li>\n
    2. If you left click on the button, then it should propagate outwards normally and fire the paragraph event listener, too.<\/li>\n<\/ol>\n
      Solution:<\/p>\n
      <html><\/pre>\n
      <body>\r\n<p id=\"demo\"> Hello Ho<button id=\"button12\"> Button2 <\/button> <\/p><\/pre>\n
      <script><\/pre>\n
      \/\/ Event Listener on the Button and it's logic<\/pre>\n
      document.getElementById(\"button12\").addEventListener(\"mousedown\",function(event){<\/pre>\n
      alert(\"button clicked\");<\/pre>\n
      if(event.button == 2 ) \/\/ Right Click<\/pre>\n
      event.stopPropagation();<\/pre>\n
      });<\/pre>\n
      \/\/ Event Listener on the paragraph element with it's logic:<\/pre>\n
      document.getElementById(\"demo\").addEventListener(\"mousedown\",function(event){<\/pre>\n
      alert(\"Paragraph clicked\");<\/pre>\n
      });<\/pre>\n
      <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
      Removing<\/strong>\u00a0an\u00a0event listener<\/strong>\u00a0from an\u00a0element<\/h3>\n
      In order to remove an event listener from an element, we need to call the\u00a0removeEventListener<\/strong>\u00a0method with the event name and the function name.<\/p>\n
      Note<\/strong>: when anonymous functions are passed, they don\u2019t have memory mapping. So we need to define those functions outside the callback and then reference them here in the removeEventListener callback.<\/p>\n
      Document.getElementbyId(\"id_name\").removeEventListener(\"click\",fn_name)<\/pre>\n
      If you have reached this point, you should have a decent understanding of how Event Listeners work in the JavaScript.<\/p>\n
      If, while working with your favorite library\/Frameworks, you ever get stuck in the Events Handling part, then these basics should help you to resolve the issue.<\/p>\n
       <\/p>\n<\/div>\n
      Honey Thakuria<\/a><\/h4>\n
      Full Stack Developer, code to solve the problems, which can improve the life of masses<\/div>\n","protected":false},"excerpt":{"rendered":"
      Photo by\u00a0Sergey Zolkin\u00a0on\u00a0Unsplash In this blog, I will try to make clear the fundamentals of the event handling mechanism in […]<\/p>\n","protected":false},"author":2,"featured_media":46,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[44,47,29],"tags":[46,31],"class_list":["post-382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-medium","category-programacion","tag-javascript","tag-programacion"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":1,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/382\/revisions\/383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/46"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}