added event-listeners example

added the example to look at the basic event-listeners and the event object itself
chadsmith12 · May 2, 2018 · 7381f31 · 7381f31
1 parent f3cee86
commit 7381f31
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/event-listeners/app.js b/event-listeners/app.js
@@ -0,0 +1,38 @@
+/* 
+* Listening to events in pure javascript.
+* This gives example of event listeners in javascript.
+* Event listeners are how you actually add interaction to the page.
+*/
+
+var clearTaskBtn = document.querySelector('.clear-tasks');
+
+// add a click event;
+clearTaskBtn.addEventListener('click', onClick);
+
+// named event function
+// e is the event object.
+function onClick(e){
+ let val;
+ val = e;
+
+ // the target element of the event
+ val = e.target;
+ val = e.target.className;
+ e.target.innerText = 'Tasks Cleared!';
+
+ // The event type;
+ val = e.type;
+
+ // timestamp
+ val = e.timeStamp;
+
+ // coordinates of the event relative to the window.
+ val = e.clientX;
+ val = e.clientY;
+ // or coordinates of the event relative to the element itself
+ // starts from the top left.
+ val = e.offsetX;
+ val = e.offsetY;
+
+ console.log(val);
+}
diff --git a/event-listeners/index.html b/event-listeners/index.html
@@ -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>