@@ -115,21 +115,24 @@ Each question asks about a given topic for a specific category, like "*What is a
115115
116116``` JavaScript
117117/*
118- 7. What is an Event Listener ?
119- /////////////////////////////
118+ 7. How do you use event listeners with jQuery ?
119+ //////////////////////////////////////////////
120120 • An Event Listener listens for a specific event to happen (i.e. submit, click, etc.) and does
121121 something (i.e. callback function).
122- • To take advantage of DOM manipulation, you need to be able to alter the DOM when EVENTS happen.
123122 • In order to update the DOM, you need to 'listen' for specific events happening.
124123 • For example:
125- • an app LISTENS when the user submits a form.
126- • an app LISTENS for when the user inputs a search term.
127- • an app LISTENS for when the user clicks on an element in the page to launch an animation.
128-
124+ • An app LISTENS when the user submits a form.
125+ • An app LISTENS for when the user inputs a search term.
126+ • An app LISTENS for when the user clicks on an element in the page to launch an animation.
129127 • So an EVENT LISTENER has 2 parts:
130128 1. Specify what event to listen for.
131- 2. provide a CALLBACK FUNCTION that runs when the event occurs. */
132-
129+ 2. provide a CALLBACK FUNCTION that runs when the event occurs.
130+
131+ • Use the ".on" method with the event and the callback to implement an event listener.
132+ • In the example below, the user listens on main (see event delegation) and, on "click"
133+ (of the only button in this study) runs a callback function that increments the counter
134+ by one and displays the updated clickCount.
135+ */
133136 function handleClicks () {
134137 let clickCount = 0 ; // Stores click count.
135138 $ (' .click-counter' text (clickCount); // show current click count.
@@ -139,15 +142,15 @@ Each question asks about a given topic for a specific category, like "*What is a
139142 });
140143 }
141144
142- function setUpEventHandlers3 () {
145+ function setUpEventHandlers () {
143146 handleClicks ();
144147 }
145148
146- function initialize3 () {
147- setUpEventHandlers3 ();
149+ function initialize () {
150+ setUpEventHandlers ();
148151 }
149152
150- $ (initialize3 );
153+ $ (initialize );
151154```
152155
153156
0 commit comments