What is the (e) used for? Im having trouble understanding why the function needs the ‘e’ and why it won’t work in the same way without it. I understand that ‘e’ is short for ‘event’. But im not understanding why we can’t just have
an event handler takes an event object as an argument, the preventDefault method exists as a method on the event object so the object needs to be passed to the handler as a parameter, the event object also contains other properties such as event.target.value which contains the value of an input,
Basically, when an event is triggered you’re passing an event object to an event handler, and the event object contains properties and methods you can use to perform certain tasks, preventDefault exists on the event object so if you don’t pass the event object you can’t access preventDefault
React is actually abstracting away a lot of the dom manipulation that you would do manually with a library like jquery so I can understand how things can get confusing, it muddies the waters
woah that’s a lot.
So is ‘e’ is an event object? But its not a distinct keyword correct?
So basically were using ‘e’ to create an event object to hook the .preventDefault onto? But it can basically be named anything, but were just using ‘e’ as an abbreviation of a miscellaneous “event” ?
Yes, e is just a variable name. Actually eventListeners be default accept the event object as an argument. The e present in argument actually gets assigned to the event object when called, similar to how a and b get assigned to numbers passed in the add function. When you do not have the argument, it cannot be resolved to the function with an argument (without default argument, ofcourse ). Hence, the event listener without any parameters does not work in this case because it cannot be resolved to the event listener’s call.
In simple terms, if you have the 2 parameter add function, but call add(5), with single argument. You can clearly see that it does not resolve this call to the function with 2 arguments. The eventListener calls the function with argument as event object, but it cannot be resolved to the function with no argument.
Hope this helps…
I guess what’s really been a point of contention for me is that Ive been accustomed to using arguments as direct variables and not events like in the case of
const add = (a,b) => {
console.log(a+b);
};
Ive understood a and b arguments to be used as direct substitutions for the a and b variables inside the function.
So its kind of hard for me to wrap my head around now using a parameter as an object like in the case of ‘e’.
Ahh that makes a lot of sense. So you need a hook for the event listener if you’re using a function with event listener inside. So you need to pass in an argument.
I have the first edition for HTML and CSS and I LOVED it. REALLY helped me out. It was my first ever code book. The way they broke down concepts was brilliant! And im a visual learner, so the aesthetics of the book really helped me.
I was going to get this book but upon looking at the reviews, I opted for Head First Javascript (which is good but not as straightforward and takes TONS of detours).
People are saying that the book is outdated and may confuse you if you’er trying to learn modern Javascript. Do you feel that that may be an issue?
I love the HTML and CSS version of the book and was trying to wait until maybe they came out with a more updated version of the JavaScript edition. But, I may pick it up since you’ve recommended it. Thanks
It is not really any different to the DOM APIs. React actually has its own versions of the events (click, scroll, submit, etc) but that’s an implementation detail, they work in exactly the same way, use the same API, they look exactly the same (albeit it is encapsulated in JSX in the React version).
// In the HTML:
// <button id="MyButton">Click me</button>
const MyButton = document.getElementById("MyButton");
MyButton.addEventListener("click", (e) => {
console.log("Here is the event object generated by a click: ");
console.log(e);
}
<MyButton onClick={(e) => {
console.log("Here is the event object generated by a click: ");
console.log(e);
}}>Click Me</MyButton>
When an event that you are listening to is triggered in a web page, the browser generates an object with some useful information about the event. The callback function for addEventListener has this object as its first argument.
Honestly this JS book helped me in my first job a hell of a lot, a lot of the projects I work on are quite small so something like jquery is far easier to implement and use than react would be for the amount of js i need to write (e.g. a few hundred lines per project),
It’s old-school web dev but not outdated, you can still use the code used in the book as jquery has a fairly stable api,
Understanding how the DOM works is really useful, and jquery still comes in handy in the real world
I see. Its really starting to make sense to me now.
I haven’t really used or began to study API’s yet, so I only have a very vague idea of what you mean by this part but I think Im understanding you correctly.
Got it. Yeah the Head First book is good but reads more like a workbook, which is fine but sometimes daunting and excessive when you’re trying to understand complicated concepts.
So I may go ahead and pick it up. I wouldn’t mind learning some Jquery
). Hence, the event listener without any parameters does not work in this case because it cannot be resolved to the event listener’s call.
I haven’t really used or began to study API’s yet, so I only have a very vague idea of what you mean by this part but I think Im understanding you correctly.