From 90325561aef5121090cca629bd2c4568ffa8def6 Mon Sep 17 00:00:00 2001
From: DrMadWill <87474631+DrMadWill@users.noreply.github.com>
Date: Thu, 11 Nov 2021 13:02:09 +0400
Subject: [PATCH] JavaScript > Event > Event Bubbling and Capturing > add

---
 8_Events/Html/index.html                      |  3 +-
 8_Events/JavaScripts/21_8_4_Event_Bubnling.js | 80 +++++++++++++++++++
 README.md                                     |  2 +
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 8_Events/JavaScripts/21_8_4_Event_Bubnling.js

diff --git a/8_Events/Html/index.html b/8_Events/Html/index.html
index 19b507a..3a22512 100644
--- a/8_Events/Html/index.html
+++ b/8_Events/Html/index.html
@@ -74,7 +74,8 @@ <h5></h5>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   <!-- <script src="../JavaScripts/19_8_1_EventListeners.js"></script> -->
   <!-- <script src="../JavaScripts/20_8_2_Move_Event.js"></script> -->
-  <script src="../JavaScripts/21_8_3_Keyboard_Event.js"></script>
+  <!-- <script src="../JavaScripts/21_8_3_Keyboard_Event.js"></script> -->
+  <script src="../JavaScripts/21_8_4_Event_Bubnling.js"></script>
 
 </body>
 
diff --git a/8_Events/JavaScripts/21_8_4_Event_Bubnling.js b/8_Events/JavaScripts/21_8_4_Event_Bubnling.js
new file mode 100644
index 0000000..6dbdf25
--- /dev/null
+++ b/8_Events/JavaScripts/21_8_4_Event_Bubnling.js
@@ -0,0 +1,80 @@
+//** Event Bubbling
+const form = document.querySelector('form')
+const card_body = document.querySelector('.card-body')
+const card = document.querySelector('.card')
+const container = document.querySelector('.container')
+
+
+    //** Icerden cole dogru olaylar tetiklenir => Event Bubbling
+    // form.addEventListener('click',function(w){
+    //     console.log('form')
+    //     w.stopPropagation()// just occur writeline action 
+    // })
+
+    // card_body.addEventListener('click',function(w){
+    //     console.log('card body')
+    //     w.stopPropagation()
+    // })
+
+
+    // card.addEventListener('click',function(w){
+    //     console.log('card')
+    //     w.stopPropagation()
+    // })
+
+    // container.addEventListener('click',function(w){
+    //     console.log('container')
+    //     w.stopPropagation()
+    // })
+
+//** Event Capturing
+
+    //** disdan iceri dogru olay => Event Capturing
+    // form.addEventListener('click',function(w){
+    //     console.log('form')
+    //     // w.stopPropagation()// just occur writeline action  
+    // },true)
+
+    // card_body.addEventListener('click',function(w){
+    //     console.log('card body')
+    //     // w.stopPropagation()
+    // },true)
+
+
+    // card.addEventListener('click',function(w){
+    //     console.log('card')
+    //     // w.stopPropagation()
+    // },true)
+
+    // container.addEventListener('click',function(w){
+    //     console.log('container')
+    //     // w.stopPropagation()
+    // },true)
+
+const deleteElemnts = document.querySelectorAll('.fa-times')
+const deletall = document.querySelector('#btnDeleteAll')
+const ul = document.querySelector('ul')
+
+// deleteElemnt.forEach(function(item){
+//     item.addEventListener('click',function(w){
+//         // console.log(w.target.parentElement.parentElement)
+//         w.target.parentElement.parentElement.remove()
+//         w.preventDefault()
+
+//     })
+// })
+
+ul.addEventListener('click',function(w){
+    if (w.target.className==="fas fa-times"){
+        w.target.parentElement.parentElement.remove();
+        w.preventDefault();
+    }
+})
+
+
+deletall.addEventListener('click',function(w){
+    deleteElemnts.forEach(element => {
+        element.parentElement.parentElement.remove()
+    });
+    w.preventDefault()
+})
\ No newline at end of file
diff --git a/README.md b/README.md
index 916eb32..36858ed 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,8 @@
 - Event 
     - Event Listeners
     - Move Events
+    - Keyboard Events
+    - Event Bubbling and Capturing