event object

last-endcode · last-endcode · commit ec02aaebe174 · 2020-10-27T20:12:03.000+07:00
diff --git a/20_event_object.js b/20_event_object.js
@@ -0,0 +1,28 @@
+// event object argument e, evt
+// info about triggered event
+// event.type
+// event.currentTarget
+// this keyword
+// preventDefault() - prevents default behaviour
+
+const heading = document.querySelector('h1');
+const btn = document.querySelector('.btn');
+const link = document.querySelector('#link');
+
+heading.addEventListener('click', function (e) {
+  e.currentTarget.classList.add('blue');
+});
+
+btn.addEventListener('click', function (e) {
+  e.currentTarget.classList.add('red');
+  //   for check type event listener
+  console.log(e.type); //click
+});
+
+// // callback as reference
+function callink(e) {
+  //   //will undefined and if link click not back again to top
+  console.log(e.preventDefault());
+}
+
+link.addEventListener('click', callink);
diff --git a/index.html b/index.html
@@ -30,6 +30,11 @@
         font-size: 1.25rem;
         text-transform: uppercase;
       }
+
+      a {
+        display: inline-block;
+        margin-top: 100vh;
+      }
     </style>
   </head>
   <body>
@@ -147,9 +152,13 @@ <h3>The Pirates</h3>
       <button class="btn">Join</button>
     </div> -->
 
-    <!-- key events -->
-    <input type="text" class="inputName" />
+    <!-- key events
+    <input type="text" class="inputName" /> -->
 
+    <!-- even object -->
+    <button class="btn">click me</button>
+    <h1>some heading</h1>
+    <a href="#" id="link">random link</a>
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -169,6 +178,7 @@ <h3>The Pirates</h3>
     <!-- <script src="/16_innerHTML_textContent.js"></script> -->
     <!-- <script src="/17.addEventListener.js"></script> -->
     <!-- <script src="/18_function_reference.js"></script> -->
-    <script src="/19_key_events.js"></script>
+    <!-- <script src="/19_key_events.js"></script> -->
+    <script src="/20_event_object.js"></script>
   </body>
 </html>
