Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Riot JS - DOM Events

    Tim KindbergTim Kindberg

    Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

    riotRiot.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 In the previous video, we auto-started our animation. Let's not auto-start the animation. Let's add some buttons that'll control the animation. There are life cycle events, which we just covered, but there are also raw DOM events, like onclick, onfocus, onchange.

    00:18 These events can be handled by adding an attribute to an element. On this button, I'll listen for the onclick event. All Riot event attributes need to evaluate to a function reference to work properly. The reference, just like all other bindings, is always in the context of the tag.

    00:37 I could write a new function down below, of this.click, but I don't need to include the "this" up here, in the binding. It's implied. What I want to do is actually trigger the start animation method on the trim tag. You can access any nested custom tag within the current tag by accessing this.tags.

    00:58 Again, you don't write out "this." Then you can reference them by name. Trim. I want to reference...Not call, just reference...the startAnimation method. We'll set up stopAnimation in the same way. Now we can start and stop the animation.

    01:21 Let's add an input so we can change the animation text. We'll bind its value to what, and on key up, we'll call the what change handler. We'll add a what change handler to this tag.

    01:47 It'll receive an event object that has been normalized to work consistently across all browsers. We can access the event's target, which will be the input, and get its value and update this.what with it. Now we can update the trim value on the fly.

    02:14 A nice little feature that Riot also has is that you can add a name attribute to any element to get a quick reference to that element. If I give this input a name of whatInput, then I can easily reference that element with self.whatInput as an alternative to e.target or in other scenarios.

    02:38 Remember that the attribute-based event handlers from this video only work with raw DOM events. I've included a list of those events at the bottom of the code example.

    Discuss

    Discuss