Module 5: targets, bubbling, propagation and capture

The event object.
To access it we modify our callback, our handler, we modify it to accept a parameter.

function handleBuyButtonClick(event) {
   console.log('You are buying it!');
  console.log('event');
}

buyButtons.forEach(function(buyButton) {
   buyButton.addEventListener('click', handleButtonClick);
});

//// the same but different

function handleBuyButtonClick(event) {
   console.log('You are buying it!');
  console.log('event.target'); // with that it will show you which button was clicked. // you can access anything about that event using event.target
}

//So if you want to see the TextContent inside the button that was clicked:
Add
const button = event.target;
inside the function, then
console.log(button.textContent);

buyButtons.forEach(function(buyButton) {
   buyButton.addEventListener('click', handleButtonClick);
});

////the same but different

For this to work you first have to add data-price="x-amount of dollars" to the html.

function handleBuyButtonClick(event) {
   console.log('You are buying it!');
  console.log('event.target.dataset.price'); // with that it will show you which button was clicked. //wrap it with parseFloat() to get a number since the regular output is a string.
}

buyButtons.forEach(function(buyButton) {
   buyButton.addEventListener('click', handleButtonClick);
});

//

another way is to use event.currentTarget
console.log(event.currentTarget);

What is the difference?
Are they the same?
The difference comes when you have nested elements.

In most cases you want to use event.currentTarget
to be precise.

Clicking on multiple things at once:
PROPAGATION

if you want to stop propagation

event.stopPropagation();

///

window.addEventListener('click', function(event) {
console.log(event.target);
});

//

There is a way to flip that.
capture:

window.addEventListener('click', function(event) {
console.log(event.target);
}, { capture: true });

//

photoEl.addEventListener('mousemove', function(e) {
   console.count(e.currentTarget);
});

photoEl.addEventListener('mouseenter', function(e) {
   console.count(e.currentTarget);
});


//


photoEl.addEventListener('mouseenter', function(e) {
   console.count(e.currentTarget);
   console.count(this);
});
//look to the left of the dot.

Module 5: Event Listener

const butts = document.querySelector('.butts');
const coolButton = document.querySelector('.cool');

const hooray = () => console.log('Hooray!');
//This is an arrow function that can also be used as an eventhabdler.

function handleClick() {
   console.log('🐛It got clicked!');
}

butts.addEventListener('click', handleClick);
coolButton.addEventListener('click', handleClick);

//if you want to remove it then you have to do this:
//There's no way to remove an anonymous function. You must use a named function in order to unbind it.

butts.removeEventListener('click', handleClick);

//
//Listen on multiple items.

const buyButtons = document.querySelectorAll('button.buy');

//You have to forEach() each element. A method Run a function for each item in our node list.
buyButtons.forEach(functions(buyButton) {
  console.log(buyButton);
  console.log('Binding the buy button');
buyButton.addEventListener('click', buyItem);
})

//or

function handleBuyButtonClick(anythingWeWant) {
anythingWeWant.addEventListener('click', buyItem);
}

buyButtons.forEach(handleBuyButtonClick);


//arrow function form//you cannot unbind it since it is an anonymous function.
buyButtons.forEach((button) => {
button.addEventListener('click', () => {
   console.log('you clicked it');
});
});

Module 4: Add a class to all elements

const buttons = document.querySelectorAll('.className');

Module 4: Traversing and Removing Nodes

const wes = document.querySelector('.wes');

console.log(wes.children);
//Will show just the child elements.
wes.firstChildElement;
wes.lastElementChild;
wes.previousElementSibling;
wes.nextElementSibling;
wes.parentElement;

console.log(wes.childNodes);
//Will show all the nodes under the element.

Module 4: HTML from Strings and XSS

item.innerHTML = `
<h1> Hey how are ya?</h1>
`;
//Change the getter to a setter and put the HTML code inside.

const width = 500;
const src = `https://pic.jpg${width}`;
const desc = `cute pup`;
const myHTML = `
<div class="wrapper">
  <h2>${desc}</h2>
  <img src="${src}" alt="${desc}"/>
</div>
`;

item.innerHTML = myHTML;
//THE HTML IS JUST A STRING.
//We can't do class things like methods and stuff. it's not an element. It becomes an element once it's dumped.
//You first have to dump it first and then do stuff after the fact.

////The other option is:

//turn a string into a DOM element

const myFragment = document.createRange().createContextualFragment(myHTML);

//This fragment is turned into DOM elements and now you can do things like:
myFragment.querySelector('img');

document.body.appendChild(myFragment);

Module 4: Creating HTML

document.createElement(tagName[, options]);

const myParagraph = document.createElement('p');
//we created it but it's only in memory. it won't show.

if you want to add attributes. Then
myParagraph.textContent = 'I am a P';
myParagraph.classList.add('special');

const myImage = document.createElement('img');

myImage.src = 'http://www.pics.jps'';
myImage.alt = 'Nice Photo';

const myDiv = document.createElement('div');
myDiv.classList.add('wrapper');

how do the add them to the page?

if you just want to dump it straight into the body
document.body.appendChild(aChild);
//method to add a Node to the end of the list

document.body.appendChild(myParagraph);

document.body.appendChild(myDiv);
myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);

It causes a repaint on the browser. You're triggering three sequential appendChild();
So what you can do instead:

myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);

and then

document.body.appendChild(myDiv);

That will just cause one.

append() another option.


const heading = document.createElement('h2');
heading.textContent = 'Cool things';

myDiv.appendChild(heading);
myDiv.insertAdjacentElement('afterbegin', heading);

const li1 = li5.cloneNode();
list.insertAdjacentElement('afterbegin', li1);
//

const li1 = li5.cloneNode(true);
li1.textContent = 'one';
list.insertAdjacentElement('afterbegin', li1);
//

Module 4: Build in and Custom Data Attributes

Attributes
//anything that's provided to an element other than the info
//They work like properties.

pic.alt = 'Cute Pup'; //setter
//don't say Image of or Picture of.

pic.width = 200;

console.log(pic.alt); //getter

console.log(pic.naturalWidth); //getter
//you have to wait for the image to download before you can get the width.

window.addEventListener('load', function() {
console.log(pic.naturalWidth);
}
//This will wait for everything to load before running the function.

pic.window.addEventListener('load', function() {
console.log(pic.naturalWidth);
}
//You can do that for just one pic and wait for it to load.

pic.width = 500;
//change the width attribute.

pic.getAttribute('alt');
console.log()

pic.setAttribute('alt', 'really cute pip');
//

pic.hasAttribute
//returns if it has an attribute. true or false if it has been set.

attach a data attribute
data-name="blah"

to access them:
classname.dataset

custom.addEventListener('click', function() {
alert(`Welcome ${custom.dataset.name `);
});

Module 4: Working with classes

console.log(pic.classList);
//A Dom token list. Array of all the classes that are on that list.

pic.classList.add('open');
pic.classList.remove('cool');
pic.classList.toggle('round');
//Add, remove or toggle a class from an element.
//Create a CSS class that will change it when doing something.

pic.addEventListener('click', toggleRound);
//This will run the function toggleRound once the pic is clicked:

function toggleRound() {
 pic.classList.toggle('round');
}
//function that adds and removes the roundness if you round it on the CSS.

A lot of Javascript interaction will be adding or removing classes to elements.

Module 4: Element Properties and Methods(getters and setters)

Getters and Setters

console.dir(element);
//will show you the object properties.

element.textContent
//get the text inside the element. This is the newer of the methods. It shows you also the hidden ones.

element.innerText
//Just the text inside without the hidden elements.

element.innerHTML
element.outerHTML
//gets the HTML inside and outside the element.

pizzaList.textContent = `${pizzaList.textContent} pizza🍕`;
//Include the text pizza. But it's slow. The alternative:

pizzaList.insertAdjacentText('beforeend', 'pizza');
//It inserts the text pizza before the end. It takes the place first:
beforebegin
afterbegin
beforeend
aftereend
Then the element you want to add.

Place to find all the different properties:
https://developer.mozilla.org/en-US/docs/Web/API/Element

Module 4: Selecting Elements on the Page or DOM

const p = document.querySelector('p');
// Create a constant that will get the first 'p' element on the page. Works like CSS selector. #div p

document.addEventListener('DOMContentLoaded', function);
//make it wait until the DOMContent is loaded to start the function.

A NodeList is not an Array. It doesn't have the methods.

const p = document.querySelectorAll('p');
//get or select all the p elements on the page.

Module 4: The DOM

window.location
//object full of information.

innerWidth
//how wide is the window

document
//all of the document

navigator
//gives you information about the device, webcam and stuff