This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create Event Listeners in Polymer Elements

    Joe MaddaloneJoe Maddalone

    In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

    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:01 Polymer gives us a couple different ways to add event listeners. The first look we'll take is at the annotated version, which is the inline version right here on an element.

    00:11 To get to our event, I'm going to say on-Click. You'll notice this is a dash syntax rather than the Hungarian notation you might be used to. I'm just going to reference a handler, so I'm going to call that clickHandler. Down here, after is, I'm going to set up clickHandler to be a function. I'm simply going to console log click. We save that, we've got our button and when we click on it, we have our event firing.

    00:42 Now, the next way we can do that is with a listener on our actual Polymer instantiations, so this'll be our listener version. To reference this guy I'm going to give it an ID, let's just say Button ID.

    00:57 Now, to set up a listener from within our Polymer instantiation, we add a key called listeners. It's going to be an object, and our first key for the element and event we want to assign this to is going to be our selector, so in our case, buttonID.click. That's the event, then we're simply in the string going to pass in our click handler.

    01:21 We'll save that. Here on the right we've got our annotated version, we've got our click event, and then we've got our listener version. Again, you can see that our click event is firing.

    Discuss

    Discuss