38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # Learn.co Educational Content License
2 |
3 | Copyright (c) 2018 Flatiron School, Inc
4 |
5 | The Flatiron School, Inc. owns this Educational Content. However, the Flatiron
6 | School supports the development and availability of educational materials in
7 | the public domain. Therefore, the Flatiron School grants Users of the Flatiron
8 | Educational Content set forth in this repository certain rights to reuse, build
9 | upon and share such Educational Content subject to the terms of the Educational
10 | Content License set forth [here](http://learn.co/content-license)
11 | (http://learn.co/content-license). You must read carefully the terms and
12 | conditions contained in the Educational Content License as such terms govern
13 | access to and use of the Educational Content.
14 |
15 | Flatiron School is willing to allow you access to and use of the Educational
16 | Content only on the condition that you accept all of the terms and conditions
17 | contained in the Educational Content License set forth
18 | [here](http://learn.co/content-license) (http://learn.co/content-license). By
19 | accessing and/or using the Educational Content, you are agreeing to all of the
20 | terms and conditions contained in the Educational Content License. If you do
21 | not agree to any or all of the terms of the Educational Content License, you
22 | are prohibited from accessing, reviewing or using in any way the Educational
23 | Content.
24 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Learn.co Curriculum
2 |
3 | We're really excited that you're about to contribute to the [open
4 | curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co).
5 | If this is your first time contributing, please continue reading to learn how
6 | to make the most meaningful and useful impact possible.
7 |
8 | ## Raising an Issue to Encourage a Contribution
9 |
10 | If you notice a problem with the curriculum that you believe needs improvement
11 | but you're unable to make the change yourself, you should raise a Github issue
12 | containing a clear description of the problem. Include relevant snippets of
13 | the content and/or screenshots if applicable. Curriculum owners regularly review
14 | issue lists and your issue will be prioritized and addressed as appropriate.
15 |
16 | ## Submitting a Pull Request to Suggest an Improvement
17 |
18 | If you see an opportunity for improvement and can make the change yourself go
19 | ahead and use a typical git workflow to make it happen:
20 |
21 | * Fork this curriculum repository
22 | * Make the change on your fork, with descriptive commits in the standard format
23 | * Open a Pull Request against this repo
24 |
25 | A curriculum owner will review your change and approve or comment on it in due
26 | course.
27 |
28 | # Why Contribute?
29 |
30 | Curriculum on Learn is publicly and freely available under Learn's
31 | [Educational Content License](https://learn.co/content-license). By
32 | embracing an open-source contribution model, our goal is for the curriculum
33 | on Learn to become, in time, the best educational content the world has
34 | ever seen.
35 |
36 | We need help from the community of Learners to maintain and improve the
37 | educational content. Everything from fixing typos, to correcting
38 | out-dated information, to improving exposition, to adding better examples,
39 | to fixing tests—all contributions to making the curriculum more effective are
40 | welcome.
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Event Listeners Lab
2 |
3 | ## Learning Goals
4 |
5 | - Create event listeners on DOM nodes using `addEventListener()`
6 |
7 | ## Introduction
8 |
9 | In this lab we will learn how to teach nodes to "listen" for an event using
10 | `addEventListener()`.
11 |
12 | If you haven't already, **fork and clone** this lab into your local environment.
13 | Navigate into its directory in the terminal, then run `code .` to open the files
14 | in Visual Studio Code.
15 |
16 | ## Create Event Listeners on DOM Nodes with `addEventListener()`
17 |
18 | In order for JavaScript to handle an event, we first need to tell it to listen
19 | for that event. We do this by calling the `addEventListener()` method on the
20 | element we want to add the listener to, and passing it two arguments:
21 |
22 | 1. the name of the event to listen for, and
23 | 2. a _callback function_ to "handle" the event
24 |
25 | Open up `index.html` in the browser. When you click in the `` area,
26 | nothing happens. Let's set up some _event handling_. Specifically, let's add an
27 | event listener for the `click` event on the `input#button` element in
28 | `index.html`.
29 |
30 | Try out the following in the Chrome DevTools console:
31 |
32 | ```js
33 | const input = document.getElementById('button');
34 | input.addEventListener('click', function() {
35 | alert('I was clicked!');
36 | });
37 | ```
38 |
39 | Now when you click inside of `input#button`, you will get an alert box.
40 |
41 | Let's review what's happening in this code.
42 |
43 | First, we grab the element that we want to add the event listener to and save a
44 | reference to it in the `input` variable.
45 |
46 | Next, we call `addEventListener()` on that element to tell JavaScript to listen
47 | for the event. We pass two arguments to `addEventListener()`: the name of the
48 | event to listen for (in this case, `click`) and a _callback function_ that will
49 | be executed when the event is "heard."
50 |
51 | [According to MDN][callback]:
52 |
53 | > A callback function is a function passed into another function as an argument,
54 | > which is then invoked inside the outer function to complete some kind of
55 | > routine or action.
56 |
57 | That's exactly what's happening here: we're passing a callback function as the
58 | second argument to the `addEventListener()` function; the callback will be
59 | invoked as soon as the event occurs.
60 |
61 | Let's pull out that second argument and take a look at it:
62 |
63 | ```js
64 | function() {
65 | alert('I was clicked!');
66 | }
67 | ```
68 |
69 | This function has all the components of functions we've seen before (the
70 | `function` keyword, a pair of parentheses, and the body of the function enclosed
71 | in curly braces) _except one_: it doesn't have a name assigned to it. This is
72 | what's called an _anonymous_ function. Because it doesn't have a name, it can't
73 | be invoked directly. But the event listener knows to execute whatever function
74 | is passed as the second argument when it detects the event, so it doesn't need
75 | to be named.
76 |
77 | If we are only calling our callback function in that one place, using an
78 | anonymous function makes sense. However, what if we wanted to use that same
79 | alert message on a bunch of elements? In that case, it would make more sense to
80 | create a separate, named function that could be called by all of our event
81 | listeners. With this approach, we would pass the _function name_ as the second
82 | argument to `addEventListener()` rather than the function itself:
83 |
84 | ```js
85 | const input = document.getElementById('button');
86 |
87 | function clickAlert() {
88 | alert('I was clicked!');
89 | }
90 |
91 | input.addEventListener('click', clickAlert);
92 | ```
93 |
94 | We could then attach our `clickAlert` to as many elements as we'd like. Just as
95 | we did for the `input` element, we would first use our CSS selector skills to
96 | grab the desired element and save it to a variable, then add the `click` event
97 | listener to that element. Give it a try!
98 |
99 | With this approach, even if we're using our `clickAlert` with a whole bunch of
100 | elements, if we decide later that we want to change the text of the alert to
101 | "Hee hee, that tickles!" instead, we would only need to make that change in one
102 | place: inside our `clickAlert()` function.
103 |
104 | **Note**: we pass `clickAlert` as the argument, not `clickAlert()`. This is
105 | because we don't want to _invoke_ the function in this line of code. Instead, we
106 | want to pass a _reference_ to the function to `addEventListener()` so _it_ can
107 | call the function when the time comes.
108 |
109 | Refresh your browser and try out the latest version of the code in the console
110 | to verify that it works. Also try passing `clickAlert()` as the second argument
111 | rather than `clickAlert` and see what happens.
112 |
113 | ## Passing the Tests
114 |
115 | Now let's set up `index.js` to do the same thing so we can get our test passing.
116 | To do that, simply copy the code into the `index.js` file's
117 | `addingEventListener()` function and run the test. Either version should pass
118 | the test — just make sure that the code creating the event listener is **inside**
119 | the `addingEventListener()` function.
120 |
121 | ### Checking the Code in the Browser
122 |
123 | We know that the code works in the console and passes the test, but we should
124 | also check our changes to `index.js` in the browser. Because you've added the
125 | `addEventListener()` function _inside_ the `addingEventListener()` function,
126 | recall that you will need to call the outer function in `index.js` to execute
127 | `addEventListener()` and activate the event listener. Be sure to refresh the
128 | page to load the new code in `index.js`.
129 |
130 | ## Resources
131 |
132 | - [MDN - Web Events](https://developer.mozilla.org/en-US/docs/Web/Events)
133 |
134 | [callback]: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
135 |
--------------------------------------------------------------------------------