-
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 examples to look at different mouse events.
- Loading branch information
1 parent
7381f31
commit 7ec1f93
Showing
2 changed files
with
113 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,37 @@ | ||
| /* | ||
| * Different mouse events in javascript. | ||
| * This gives example of some different mouse events you can listen too. | ||
| */ | ||
|
|
||
| const clearBtn = document.querySelector('.clear-tasks'); | ||
| const card = document.querySelector('.card'); | ||
| const heading = document.querySelector('h5'); | ||
|
|
||
| // different events | ||
| //clearBtn.addEventListener('click', runEvent); | ||
| // double click | ||
| //clearBtn.addEventListener('dblclick', runEvent); | ||
| // mouse down event | ||
| //clearBtn.addEventListener('mousedown', runEvent); | ||
| // mouse up event | ||
| //clearBtn.addEventListener('mouseup', runEvent); | ||
| // mouse enter event | ||
| //card.addEventListener('mouseenter', runEvent); | ||
| // mouse leave event | ||
| //card.addEventListener('mouseleave', runEvent); | ||
| // mouse over - these fire off when you go in any element that is in the element of the event. | ||
| //card.addEventListener('mouseover', runEvent); | ||
| // mouse out - these fire off when you go out any element that is out of the element of the event. | ||
| //card.addEventListener('mouseout', runEvent); | ||
| // mouse move - move the mouse anywhere in the elemtn | ||
| card.addEventListener('mousemove', runMouseMove); | ||
|
|
||
| // event handler | ||
| function runEvent(e){ | ||
| console.log(`Event Type: ${e.type}`); | ||
| } | ||
|
|
||
| function runMouseMove(e){ | ||
| heading.textContent = `Current Mouse X: ${e.offsetX} Current Mouse Y: ${e.offsetY}`; | ||
| document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 70)`; | ||
| } |
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> |