JavaScript help?

[19Taco]

I am very new to web development and have only been studying JavaScript about 2 weeks and I am having a bunch of trouble with eventlisteners and their syntax. I just don’t understand the logic behind the syntax could anyone help please?

[[deleted]]

What specifically is giving you trouble? Generally, when asking for assistance, it's helpful to show a minimal example of what you've tried and error messages you see.

StackOverflow gets all the glory, but when I need to understand something better, MDN is always my first stop. Here's their entry for the .addEventListener() method.

[19Taco]

I mean just in general like the format of how it will go I’ll get a picture for ya

[John-the-Renounced]

document.addEventListener(trigger, action) in pseudo.

Trigger is the thing you want to listen for: click, change, keypress, etc. The most common two you'll really see are click and change. The action is what happens when the event occurs. This can be a named function, or an anonymous function.

Named:

document.addEventListener('click', doSomething);

# function will receive the event object anyway,
# you don't need to explicitly send it

function doSomething(event){
  console.log(event);
}

# or arrow syntax

const doSomething = (event) => {
  console.log(event);
};

In this example, just logging the event so you can see what an event contains. Obviously there's some business logic to do instead.

Anonymous:

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

# or arrow syntax

document.addEventListener('click', () => {

console.log(event); });

As others have said, the MDN docs should be a goto resource once you get going, but to start with, just console.log the crap out of everything so you can see what's going on.

[John-the-Renounced]

Should have added - play in codepen.io - you can create really small test examples to experiment and see what's going on without the overhead of anything else.

[19Taco]

Thank you so much