Difference(s) between Event-driven program and Event handling?

CS Principles Unit and Lesson Discussion
,
1

Can I have more explanation about th differences between these two vocabularies.

2

“Event Driven” Programming is a type of programming (some might call it a programming “paradigm”). “Event handling” is simply the term for what an event-driven program does in order process a user’s interactions with the program. Users generate “events” which need to be “handled” by the code. When you do that, you have written an “event driven” program. There’s usually more to an event-driven program than just the event-handling parts, but the event-handling code is the fundamental characteristic of an event-driven program.

Make sense?

Possibly worth noting that event-driven programming for learners is in contrast to the more classic style of strictly “procedural” or sequential programming" in which the flow of events is strictly controlled by the programmer. And we often drift back and forth between the two styles which can get confusing. Procedural style programming is often much quicker to produce and so it’s convenient for testing ideas and concepts.

The most obvious distinction between the two is that a procedural program typically runs in the console or command line. Event-driven programming is necessary when you want a graphical user interface where a user can click on buttons, menus and so on.

For example here is a simple JavaScript program written in procedural style:

var name  = prompt("please enter your name")
var age = promptNum("please enter your age")
console.log("Thanks "+name+".  You are "+age+" years old);

Notice that the order in which you get input, and what type of input, is dictated by the order of lines in the code. The last line - the output - relies on the fact that the input has been collected on the previous two lines. Contrast that with a (more verbose) beginning of an event-driven version:

var name = ""; //global variables for name and age
var age = -1;

onEvent("nameText", "onChange", function(){  //handle name input
    name = getText("nameText");
}

onEvent("ageText", "onChange", function(){   //handle age input
   age = getNumber("ageText");
}

Now, the program above has no output because I’m not sure where to put it. Since I can’t know which event will be triggered first, or even if both inputs will occur, it’s trickier. I need a way to display output only once I know I’ve got both inputs.

(Here is a simple solution:

Make a “submit” button that the user can click. When we handle that event we can grab the name text and the age and do our output right there.

onEvent("submitBtn", "click", function(){  //handle name input
    name = getText("nameText");
    age = getNumber("ageText");
    console.log("Thanks "+name+".  You are "+age+" years old);
}

)

Hope this helps.

1 Like
3

Big thank for your reply. Things are getting clearer, specially its my first year in teaching Building Apps through Code.org and still some new vocabularies are not clear.

4

I really appreciate this question because it is the same one I had- thank you for asking. The response is clear and I appreciate the examples!