{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-1---event-delegation/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"75ca408d-e9c1-5567-a2df-cd432fd3861b","excerpt":"Event Delegation in JavaScriptJS event listeners fire not only on a single DOM element but on all its decendants. For example, if you add event listeners to ul, you’re actually adding event listeners to all of children elements inside ul as well. This happens through a process…","html":"

Event Delegation in JavaScript

\n

JS event listeners fire not only on a single DOM element but on all its decendants. For example, if you add event listeners to ul, you’re actually adding event listeners to all of children elements inside ul as well. This happens through a process called event bubbling

\n

event.target : The actual element that triggered event
\nevent.currentTarget : The element with the listener attached

\n
function handleChange(event) {\n  // when name changes\n  console.log(event.currentTarget) //form tag\n  console.log(event.target) //name input tag\n}\n\nlet el = document.getElementById('form')\nel.addEventListener('change', handleChange)\n\n<form id=\"form\">\n  <div class=\"input-group\">\n    <label class=\"control-label\" for=\"Name\">Name</label>\n    <input type=\"text\" id=\"Name\" name=\"Name\" placeholder=\"John Doe\" />\n  </div>\n  <div class=\"input-group\">\n    <label class=\"control-label\" for=\"Email\">Email</label>\n    <input type=\"text\" id=\"Email\" name=\"Email\" placeholder=\"example@gmail.com\" />\n  </div>\n</form>
\n
\n
\n

Reference\nhttps://www.youtube.com/watch?v=MY0UBGX2FtA&t=1025s

\n
\n
","frontmatter":{"title":"JavaScript Concept 1 - Event Delegation","date":"July 01, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-1---event-delegation/","previous":null,"next":{"fields":{"slug":"/JavaScript/javascript-concept-2---hoisting/"},"frontmatter":{"title":"JavaScript Concept 2 - Hoisting","category":"JavaScript"}}}}}