Event Handling (asynchronously) Demo Experiment Run Experiment

Event Handling (asynchronously)

Jaap Murre

You can still use all of jquery’s event handlers, as this demo illustrates.


This is called asynchronous programming: events are now driving your script, causing functions - event handlers - to be activated. Sometimes, this approach is handy to use. 

You can mix this style of programming with the await-based style (synchronous programming) as well.

See for the jquery documentation on the on() function for more information. The events are for example ‘click’, ‘mouseup’, ‘mousedown’, etc. Many of these are shown in the side panel of the editscript page: Script -> Events.

If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.

It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.

The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.

// You can still use all of jqueries event handlers, as this example shows
var c = main.addblock("center","center",20,5,"Click Me!","yellow");

c.node.id = "jantje";

$("#jantje").on("click",function(){

    console.log("ONE");
    
});

console.log("TWO");

awaitkey(" ");
This experiment has no files of this type
This experiment has no files of this type
This experiment has no files of this type
This experiment has no YouTube links
This experiment has no files of this type