events for lists

James Halliday · James Halliday · commit 2116d140f16f · 2015-01-15T17:55:32.000-08:00
diff --git a/dom.markdown b/dom.markdown
@@ -379,6 +379,54 @@ form.addEventListener('submit', function (ev) {
 });
 ```
 
+---
+# registering events for multiple elements
+
+Suppose we have some html:
+
+``` html
+<ul>
+  <li>one</li>
+  <li>two</li>
+  <li>three</li>
+</ul>
+```
+
+There are two ways we can register a "click" event for each
+`li` element.
+
+---
+# register a listener on each element
+
+We can register a "click" listener on each element:
+
+``` js
+var items = document.querySelectorAll('ul li');
+for (var i = 0; i < items.length; i++) (function (elem) {
+    elem.addEventListener('click', function (ev) {
+        ev.target.style.fontWeight = 'bold';
+    });
+})(items[i]);
+```
+
+This is kind of messy. We need to use a closure because the
+for loop modifies the `i` index before the events fire so it
+is always the last index.
+
+---
+# ev.target
+
+A simpler way to register a listener for many elements is to
+register a listener on the parent `ul` and check the
+`ev.target`:
+
+``` js
+var ul = document.querySelector('ul');
+ul.addEventListener('click', function (ev) {
+    ev.target.style.fontWeight = 'bold';
+});
+```
+
 ---
 # xhr
 
diff --git a/dom/list.html b/dom/list.html
@@ -0,0 +1,15 @@
+<html>
+ <body>
+   <ul>
+     <li class="zero">zero</li>
+     <li class="one">one</li>
+     <li class="three">three</li>
+   </ul>
+   <script>
+    var ul = document.querySelector('ul');
+    ul.addEventListener('click', function (ev) {
+      ev.target.style.fontWeight = 'bold';
+    });
+   </script>
+ </body>
+</html>
diff --git a/dom/wow.html b/dom/wow.html
@@ -1,9 +1,17 @@
 <html>
   <head><title>wow</title></head>
   <body>
-    <h1 id="top">very tree</h1>
-    <div class="msg">
-      so <span>tall</span>
-    </div>
+    <form method="POST" action="/submit">
+      <input type="text" name="cool">
+      <input type="submit" value="submit this form!">
+    </form>
+    <script>
+      var form = document.querySelector('form');
+      form.addEventListener('submit', function (ev) {
+        ev.preventDefault();
+        var cool = form.querySelector('[name="cool"]');
+        console.log(cool.value);
+      });
+    </script>
   </body>
 </html>
