learn about Event object

Aman0509 · Aman0509 · commit a19aa8e247d0 · 2023-05-03T00:10:36.000+05:30
diff --git a/Working-with-Events/README.md b/Working-with-Events/README.md
@@ -5,6 +5,7 @@
 | [Introduction to Events in JavaScript](#introduction-to-events-in-javascript) |
 | [Different Ways of Listening to Events](#different-ways-of-listening-to-events) |
 | [Removing Event Listeners](#removing-event-listeners) |
+| [The Event Object](#the-event-object) |
 
 ## [Introduction to Events in JavaScript](https://drive.google.com/uc?export=view&id=1tfi-wZ9BYL2wISnyZ2JCcutRPApHpyCV)
 
@@ -207,4 +208,34 @@ Readings:
 
 - [You’ve Got Options for Removing Event Listeners](https://www.macarthur.me/posts/options-for-removing-event-listeners)
 
-- [How to remove an event Listener in JavaScript? ](https://linuxhint.com/remove-event-listener-javascript/)
+- [How to remove an event Listener in JavaScript? ](https://linuxhint.com/remove-event-listener-javascript/)
+
+## The [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event) Object
+
+An `Event` object is created whenever an event is triggered, such as a button click or a form submission. The `Event` object contains information about the event, such as the type of event, the target element that triggered the event, and any additional data associated with the event.
+
+Here's an example of using the `Event` object to log information about a button click event:
+
+```javascript
+// Get the button element
+const button = document.querySelector('button');
+
+// Add a click event listener to the button
+button.addEventListener('click', function(event) {
+  // Log information about the event
+  console.log('Event type:', event.type);
+  console.log('Target element:', event.target);
+});
+```
+
+In this example, the `addEventListener()` method is used to add a click event listener to a button element. The second argument to the `addEventListener()` method is an anonymous function that takes an Event object as its argument.
+
+Inside the anonymous function, information about the `Event` object is logged to the console. The `event.type` property is used to log the type of event (in this case, `'click'`), and the `event.target` property is used to log the target element that triggered the event (in this case, the button element).
+
+By using the `Event` object, you can access a variety of properties and methods to help you handle events in JavaScript. For example, you can use the event.`preventDefault()` method to prevent the default behavior of an event (such as submitting a form), or you can use the `event.stopPropagation()` method to stop an event from propagating up the DOM tree.
+
+Readings:
+
+- [Javascript: let’s meet the event object](https://medium.com/launch-school/javascript-lets-talk-about-events-572ecce968d0)
+
+- [JavaScript Event Objects Tutorial](https://www.nickmccullum.com/javascript/javascript-event-objects/)
diff --git a/Working-with-Events/projects/events-01-starting-setup/assets/scripts/events.js b/Working-with-Events/projects/events-01-starting-setup/assets/scripts/events.js
@@ -1,13 +1,18 @@
-const button = document.querySelector('button');
+const buttons = document.querySelectorAll('button');
 
 /* Using the `on` property */
 
 // button.onclick() = function() {
 
 // }
 
-const buttonClickHandler = () => {
-    alert('Button was clicked!');
+// const buttonClickHandler = () => {
+//     alert('Button was clicked!');
+// }
+
+const buttonClickHandler = event => {
+	console.log(event);
+	event.target.disabled=true;
 }
 
 const anotherButtonClickHandler= () => {
@@ -19,9 +24,13 @@ const anotherButtonClickHandler= () => {
 // button.onclick = anotherButtonClickHandler;
 
 // Recommended Approach
-button.addEventListener('click', anotherButtonClickHandler);
+// button.addEventListener('click', anotherButtonClickHandler);
 
 // Suppose, we are removing event listener after 2 seconds
-setTimeout(() => {
-	button.removeEventListener('click', anotherButtonClickHandler)
-}, 3000);
+// setTimeout(() => {
+// 	button.removeEventListener('click', anotherButtonClickHandler)
+// }, 3000);
+
+buttons.forEach(btn => {
+	btn.addEventListener('click', buttonClickHandler);
+});
diff --git a/Working-with-Events/projects/events-01-starting-setup/events.html b/Working-with-Events/projects/events-01-starting-setup/events.html
@@ -12,6 +12,7 @@
     <div>
       <h2>Events in JavaScript</h2>
       <button>Click me</button>
+      <button>Click me Too!</button>
     </div>
   </body>
 </html>
