-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added event bubbling and delegation examples
added examples to explain event bubbling and delegation.
- Loading branch information
1 parent
481c4b6
commit 110db4c
Showing
2 changed files
with
124 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* | ||
| * Event Bubbling and Event Delegation. | ||
| * Event Bubbling is the bubbling up of the event in the dom. | ||
| * the event bubbles up to its parents. | ||
| * Event Delegation is when you put the event on the parent and you target the element you want that event for | ||
| */ | ||
|
|
||
| // Event bubbling | ||
| // Clicking on the card title will bubble all the way up. | ||
| const cardTitle = document.querySelector('.card-title'); | ||
| const cardContent = document.querySelector('.card-content'); | ||
| const card = document.querySelector('.card'); | ||
| const col = document.querySelector('.col'); | ||
|
|
||
| // cardTitle.addEventListener('click', function(){ | ||
| // console.log("card title"); | ||
| // }); | ||
|
|
||
| // cardContent.addEventListener('click', function(){ | ||
| // console.log("card content"); | ||
| // }); | ||
|
|
||
| // card.addEventListener('click', function(){ | ||
| // console.log("card") | ||
| // }); | ||
|
|
||
| // col.addEventListener('click', function(){ | ||
| // console.log("col") | ||
| // }); | ||
|
|
||
| // Event Delegation. | ||
| // in this example querySelector only grabbed the first x. | ||
| // the event only works for the first x, not the others. | ||
| const removeItem = document.querySelector('.delete-item'); | ||
|
|
||
| //removeItem.addEventListener('click', deleteItem); | ||
|
|
||
| function deleteItem(e){ | ||
| if(e.target.parentElement.classList.contains('delete-item')){ | ||
| e.target.parentElement.parentElement.remove(); | ||
| console.log('delete item'); | ||
| } | ||
| } | ||
|
|
||
| // with event delegation you put the event onto a parent | ||
| // you must do this for items that could be dynamically added | ||
| document.body.addEventListener('click', deleteItem); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> | ||
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" | ||
| crossorigin="anonymous"> | ||
| <title>Task List</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col s12"> | ||
| <div id="main" class="card"> | ||
| <div class="card-content"> | ||
| <span class="card-title">Task List</span> | ||
| <div class="row"> | ||
| <form id="task-form"> | ||
| <div class="input-field col s12"> | ||
| <input type="text" name="task" id="task" value="Walk the dog"> | ||
| <label for="task">New Task</label> | ||
| </div> | ||
| </div> | ||
| <input type="submit" value="Add Task" class="btn"> | ||
| </form> | ||
| </div> | ||
| <div class="card-action"> | ||
| <h5 id="task-title">Tasks</h5> | ||
| <ul class="collection"> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <a class="clear-tasks btn black" href="">Clear Tasks</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> | ||
| <script src="app.js"></script> | ||
| </body> | ||
|
|
||
| </html> |