Javascripts variables are local

I have defined the variable “i” at two places. Is it necessary or I am still missing something regarding the scope of the "let" variable?

As let is block scoped, these are two different variables (just with the same name). You could also call the second one j to avoid confusion.

1 Like

In this →

for (let i = 0; i < accHD.length; i++) {
		accHD[i].addEventListener('click', toggleItem, false);
	}

toggleItem is the function, right? what does false signifies?

This signals whether or not the callback should be fired in the “capture” phase.

If you’re not sure what that means read the first few paragraphs of this article:

Yup.

1 Like

What does that mean?

Does that mean the phase before the actual click event happened?

You haven’t read the article that was linked to yet. :wink:

2 Likes

I have read the article, but I didn’t understand the few things:

#1

"document root" → This term is used multiple times. what exactly is referred back to as “the document root”

#2

The first phase is the capture phase. The event starts its journey at the root of the document, working its way down through each layer of the DOM, firing on each node until it reaches the event target. The job of the capture phase is to build the propagation path, which the event will travel back through in the bubbling phase.

As mentioned, you can listen to events in the capture phase by setting the third argument of addEventListener to true. I have not found many use cases for capture phase listeners, but you could potentially prevent any clicks from firing in a certain element if the event is handled in the capture phase.

I have highlighted few things in bold in the above citation. Can someone please help me to understand that. Thank you in advance.

“root” comes from XML terminology (you can think of HTML as a “version” of XML)
https://www.w3.org/TR/WD-xml-lang-970630#sec2.2

3 There is exactly one element, called the root, or document element, for which neither the start-tag nor the end-tag is in the content of any other element.

In other words, it is not nested inside any other element, the outermost pair of tags.

Capturing vs. Bubbling took me a while before I could read about the difference without saying “Huh?”. This site helped me a lot
https://www.quirksmode.org/js/events_order.html

Even without JavaScipt a page can have a lot of events. And different elements can have events that other elements can’t have. But I’ll try a simple contrived example.

<div>
  <button>Button</button> 
</div> 

The div might have a mouseover event listener and the button an onclick event listener. With capture I could intercept the mouseover from reaching the button. With bubble I could intercept the click from reaching the div.

TBH, even though I’m reasonably sure I have used capture before, I can’t recall having ever used it. That’s how rare using capture for me has been and how often I’ve used bubble.

1 Like

This is not getting anywhere in my head. Can you please help me understand this with certain examples? Thanks!

Before moving forward. Please confirm if I am not misinterpreting the things.

This can be explained in terms of the HTML like this →

=

<main class="element1">
	<div class="element2">
		
	</div>
</main>

(above is just one possible example).

Look at the HTML of some of your pages. Which pair of tags are not inside any other pair of tags?

Yes, you’ve got it right.

1 Like

Well done for taking time to read the article. Are things clear now? Or do you have any specific questions?

1 Like

I am still re-reading that to digest it more. Will be back with the questions soon. In the meanwhile can you please help me to understand what exactly is this line doing:

var itemClass = this.parentNode.className;

It is assigning the classnames of the elements parent, to a variable called itemClass.

1 Like

so actually “itemClass”, which is a variable is actually storing a CSS class name. Right?
And this variable storing class name is further used in loops etc.

It may not be one class name. If there are several classnames involved then all of them will be stored in that variable.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.