diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md index 7074fa54..b82b3c01 100644 --- a/page/events/introduction-to-custom-events.md +++ b/page/events/introduction-to-custom-events.md @@ -30,11 +30,16 @@ you have a lightbulb in a room in a house. The lightbulb is currently turned on, and it's controlled by two three-way switches and a clapper: ``` + +
-
-
-
-
+
My room light
+
Switch 1
+
Switch 2
+
Clapper switch
``` @@ -55,10 +60,10 @@ $( ".switch, .clapper" ).click(function() { }); ``` -With custom events, your code might look more like this: +With custom events, we can define our own events. Then your code might look more like this: ``` -$( ".lightbulb" ).on( "changeState", function( e ) { +$( ".lightbulb" ).on( "changeTheLightState", function( e ) { var light = $( this ); if ( light.hasClass( "on" ) ) { light.removeClass( "on" ).addClass( "off" ); @@ -68,11 +73,11 @@ $( ".lightbulb" ).on( "changeState", function( e ) { }); $( ".switch, .clapper" ).click(function() { - $( this ).parent().find( ".lightbulb" ).trigger( "changeState" ); + $( this ).parent().find( ".lightbulb" ).trigger( "changeTheLightState" ); }); ``` -This last bit of code is not that exciting, but something important has happened: we've moved the behavior of the lightbulb away from the switches and the clapper and to the lightbulb itself. +Here something important has happened: we've moved the behavior of the lightbulb away from the switches and the clapper and to the lightbulb itself. Let's make our example a little more interesting. We'll add another room to our house, along with a master switch, as shown here: