How Event Bubbling works and what is it?

Question

NB: This question was marked as dup with Difference between Event Bubbling and Event Capture, but it isn't.I am trying to ask basic of what is Event,Target and TagName. I want to understand, what is even, what is target and tagName, as it is like arguments passed in a function.

I am trying to understand events and target, in other words Event Bubbling, I am totally confused over what is it and how to understand it,I know everything is a event but can someone would be able to explain in some analogy, where is easy to understand with a example

document.addEventListener = ("click", (event) => {
   event.target.tagName
});

tagName is something i want to know to.

Bubbling is a small part of events. The event object doesn't have a great deal to do with bubbling. Target should be [easy enough to learn about](https://duckduckgo.com/?q=event+target&t=he&ia=web) without resorting to stackoverflow. `tagName` has nothing to do with events and is [also easy to research](https://duckduckgo.com/?q=javascript+tagName&t=ha&ia=web). — Quentin, Mar 18 '17 at 21:43

score 1 · Accepted Answer · answered Mar 18 '17 at 22:01

1

It looks like you may have misnamed your question. From your edit, it sounds like you really want to know more about the event object and in particular, the target and target.tagName properties.

Here is an example of event bubbling in action, showing off the properties in question:

event holds metadata about the event that occurred;
event.target holds a reference to the original event source, for example the button clicked;
event.target.tagName is just the name of the target's tag in uppercase, e.g. 'DIV' or 'P';
event.currentTarget holds a reference to the node to which the event listener was attached.

let handler = event => {
  console.log('Handler fired!')
  console.log('Event listener attached to:', event.currentTarget)
  console.log('Event originally occurred on:', event.target)
}

document.getElementById('outer').addEventListener('click', handler)
document.getElementById('inner').addEventListener('click', handler)
document.body.addEventListener('click', handler)

<div id="outer">
  <button id="inner">Click Me!</button>
</div>

answered Mar 18 '17 at 22:01

gyre

16,369
3
37
47

Thanks! This is what i wanted, you may want to edit question as i am not a native english speaker. However i am a bit confused over `event` and `target`. Can i say `target` is like `click` or `keydown` or `keypress`, but then again wouldn't it be a `event`, like event says. Everything you do e.g scroll, click, `keydown`, `keypress`, `zoom` or `pan` is a `event`, or i am missing something> – localhost Mar 18 '17 at 23:52
`event.target` is a DOM node on your page, like a `
` or ``. The attribute that holds e.g. `keydown` or `click` would be `event.type`.
– gyre Mar 18 '17 at 23:54
I did something like this `document.addEventListener("click" , function(event){ console.log("The" + event + "is clicked and" + event.target + "is targeted using tagname of " + event.target.tagName); })` while i am getting grip of it, What i don't understand is when the above is output, it is broken down like it should `[HTMLLIElement]` but when i do `event.target.tagName` it gives me full elements and its content, why the difference – localhost Mar 19 '17 at 01:51
1

The `target` itself is an object with properties like `textContent` and `tagName` (which are both strings). When you print an object to the console, it either turns it into a string like `'[HTMLLIElement]'` or shows you all of its properties as a tree. Strings, on the other hand, will always be printed as a string. – gyre Mar 19 '17 at 01:56
Great, I will have a go with your last comment, will try to digest it, but thanks for the great example and explanation! – localhost Mar 19 '17 at 02:01

How Event Bubbling works and what is it?

1 Answers1