YUI3: Controlling key strokes events (keyup, keydown, keypress)

In this post I want to cover the general specifications related with keystrokes in YUI3. Basically you will see few examples and a bunch of links to the YUI Library official documentation.

There are two different ways to define a keylistener in YUI3:

Considering that in YUI3 most of the DOM references are YUI Node objects, using the ‘on’ method for a node object is the most reasonable approach for all kind of listeners, including keylistener.

YUI().use("node", function(Y) {
    Y.get('#my-input-element').on("keypress",  function(e) {
        console.log('keypress when the focus is on the input element');
    });
});

We can use ‘keydown’ or ‘keyup’ to be more specific in the definition.

Also, we can use the traditional way:

YUI().use("*", function(Y) {
    Y.on('keydown', function(e) {
        console.log('keydown when the focus is on the input element');
    }, '#my-input-element');
});

or we can use the event name ‘key’ and using the 4th argument to be more specific in the event definition, check this example:

YUI().use("*", function(Y) {
    Y.on('key', function(e) {
        console.log('keydown when the focus is on the input element');
    }, '#my-input-element',  'down', Y);
});

http://developer.yahoo.com/yui/3/api/YUI.html#method_on

We can also use [press] or [up], or we can be even more specific describing which key combination we want to listen for, like this combination: [press:65,66+shift+ctrl], this event definition will fire only if keyCode 65 or 66 is detected during a keypress event while shift and control are held down.

Check this advanced example:

YUI().use("*", function(Y) {
    Y.on('key', function(e, myInt, myString, myArray, myObj) {
        console.log('keydown when the focus is on the input element');
    }, '#my-input-element',  'down:65,12,13+shift', Y, 1, '2', [3], {indx:4});
});

In this example, we have a definition for keydown for keyCodes 65, 12 or 13, plus the shift key held down at the same time. The 5th argument represents the execution context (Y), and the rest of the arguments will be passed thru the handler method. More information about this feature here:

Of course, we can add this kind of event to any DOM element/tag, but it only makes sense if the event can get the focus, usually all kind of form input fields, anchors, images, buttons, etc.

Controlling the event propagation and the default behavior:

YUI3 controls all the events in the same way, wrapping the event object (variable ‘e’ passed thru the handler function) into a more consistent object. This feature allows us to control the object propagation easily. We can use preventDefault and stopPropagation directly, instead of invoking YAHOO.util.Event.stopPropagation or YAHOO.util.Event.preventDefault as we used to do in YUI2.x. Here is a very simple example:

YUI().use("node", function(Y) {
    Y.get('#my-input-element').on("keyup",  function(e) {
        e.preventDefault();
        console.log('the input element never receives this event.');
    });
});

http://developer.yahoo.com/yui/3/api/Event.Facade.html#method_preventDefault

Global keystroke events:

We can also listen for global events. Defining a listener for an especial element called ‘document‘, we will receive a notification for every keystroke.

YUI().use("node", function(Y) {
    Y.get('document').on("keyup",  function(e) {
        console.log('global keyup');
    });
});

http://developer.yahoo.com/yui/3/api/Node.html#method_Y.get

Simulating keystroke events:

Another feature, and this one is new in YUI3, is the event simulation, which means you can simulate user actions like clicks and keystrokes. I hope you don’t need to use it, because I really think that with a good design you don’t need to use this feature other than in a js unit test, but just in case, here is an example:

YUI().use("event-simulate", function(Y) {
    var element = document.getElementById("custom-input-element");
    //simulate a keystroke with Ctrl key down
    Y.Event.simulate(element, "keyup", { keyCode: 65, ctrlKey: true });
});

http://developer.yahoo.com/yui/3/api/Event.html#method_simulate

Examples:

Click here to see a very simple sample of how to use all these concepts.

One final note: some of these concepts can change in the future (examples based on YUI3 PR2).