From 56e106917a1b9ea3d09f3e5ef5cded5cd3a39049 Mon Sep 17 00:00:00 2001 From: githubshrek Date: Wed, 16 Jul 2014 13:29:55 +0200 Subject: [PATCH] Make the example more concrete As a student, I want to copy/paste the example and try it. By adding a definition of the CSS for the on and off class, and by adding text which can be clicked on, the example becomes easily runnable. --- page/events/introduction-to-custom-events.md | 21 ++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) 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: