connor · March 29, 2012 00:54 · Mar 29, 2012 · Mar 29, 2012 · Mar 29, 2012 · Mar 29, 2012
diff --git a/introduction to events.markdown b/introduction to events.markdown
@@ -34,11 +34,11 @@ An example of using an event listener is like so:
 ```
 
 
-<javascript>
+```js
 var element = document.getElementById('myButton');
 element.addEventListener('click', function() {
   alert("This is good!");
 }, false)
-</javascript>
+```
 
 Like mentioned in the previous section, using event listeners have several advantages, such as: separating the markup (HTML) from the behavior (JavaScript) and not duplicating code. This is what people mean by using *Unobtrusive JavaScript*: it stays separate from your markup and doesn't repeat itself.
diff --git a/introduction to events.markdown b/introduction to events.markdown
@@ -34,11 +34,11 @@ An example of using an event listener is like so:
 ```
 
 
-```js
+<javascript>
 var element = document.getElementById('myButton');
 element.addEventListener('click', function() {
   alert("This is good!");
 }, false)
-```
+</javascript>
 
 Like mentioned in the previous section, using event listeners have several advantages, such as: separating the markup (HTML) from the behavior (JavaScript) and not duplicating code. This is what people mean by using *Unobtrusive JavaScript*: it stays separate from your markup and doesn't repeat itself.
diff --git a/introduction to events.markdown b/introduction to events.markdown
@@ -29,16 +29,16 @@ Instead, it's best to separate your markup from your logic by using event listen
 
 An example of using an event listener is like so:
 
-<markup>
+```html
 <button id="myButton">Click Me!</button>
-</markup>
+```
 
 
-<javascript>
+```js
 var element = document.getElementById('myButton');
 element.addEventListener('click', function() {
   alert("This is good!");
 }, false)
-</javascript>
+```
 
 Like mentioned in the previous section, using event listeners have several advantages, such as: separating the markup (HTML) from the behavior (JavaScript) and not duplicating code. This is what people mean by using *Unobtrusive JavaScript*: it stays separate from your markup and doesn't repeat itself.
diff --git a/introduction to events.markdown b/introduction to events.markdown
@@ -17,9 +17,9 @@ There are two general ways that we can perform an action when an event occurs:
 
 An example of using an inline event handler is like so:
 
-<markup>
+```html
 <button id="myButton" onclick="alert('This is bad');">Click Me!</button>
-</markup>
+```
 
 As you probably guessed from reading what was within the `alert` - using inline event handlers is a bad practice that we **don't recommend**.
 

diff --git a/introduction to events.markdown b/introduction to events.markdown
@@ -0,0 +1,44 @@
+## Introduction to Events
+
+Events are at the heart of most pages utilizing JavaScript. For our JavaScript to perform an action, we must wait for a specific event to happen, and then execute the predefined action.
+
+### What an event is
+
+While it was hinted at earlier, events are **things that happen on the page**. The majority of events utilized in JavaScript applications are user-driven, like: clicking a button, hovering over an element, and pressing a key. However, there are many other events that the browser fires, like: loading all of the resources on a page or going offline. MDN has a good reference of [available DOM events](https://developer.mozilla.org/en/DOM/DOM_event_reference).
+
+###  Performing an action when an event happens
+
+Now that we have a basic understanding of what DOM events are, we can perform an action when an event occurs.
+
+There are two general ways that we can perform an action when an event occurs:  `inline event handlers` and `event listeners`.
+
+
+##### Inline Event Handlers
+
+An example of using an inline event handler is like so:
+
+<markup>
+<button id="myButton" onclick="alert('This is bad');">Click Me!</button>
+</markup>
+
+As you probably guessed from reading what was within the `alert` - using inline event handlers is a bad practice that we **don't recommend**.
+
+Instead, it's best to separate your markup from your logic by using event listeners.
+
+##### Event Listeners
+
+An example of using an event listener is like so:
+
+<markup>
+<button id="myButton">Click Me!</button>
+</markup>
+
+
+<javascript>
+var element = document.getElementById('myButton');
+element.addEventListener('click', function() {
+  alert("This is good!");
+}, false)
+</javascript>
+
+Like mentioned in the previous section, using event listeners have several advantages, such as: separating the markup (HTML) from the behavior (JavaScript) and not duplicating code. This is what people mean by using *Unobtrusive JavaScript*: it stays separate from your markup and doesn't repeat itself.