How can I handle a hover the Polymer way without external libraries?

javascript, polymer

Solution

`on-mouseover` and `on-mouseout` are correct, here's a demo as a `Stack Snippet`:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>

<my-app></my-app>
  
<polymer-element name='my-app'>
  <template>
    <button on-mouseover='{{onHovered}}' 
            on-mouseout='{{onUnhovered}}'>
      A humble button
    </button>
    <div>
      hovered: {{hovered}}
    </div>
  </template>
  <script>
    Polymer('my-app', {
      hovered: false,
      onHovered: function() {
        this.hovered = true;
      },
      onUnhovered: function() {
        this.hovered = false;
      }
    })
  </script>
</polymer-element>

It's possible that your element doesn't have a `myHoverHandler` property. Perhaps there's a typo?

As for whether to use Polymer event binding vs other methods, you can absolutely do this with vanilla js or jquery or whatever. Polymer handles a bit of the busy work, like making sure that the event handler is registered in conditional and repeated templates, binding `this` to the element which is usually what you want, and deregistering the handlers when their elements are removed from the DOM. There are times though when doing it manually makes sense too though.

Problem

I figured I would need to do something like: `<li on-mouseover="{{ myHoverHandler }}">blah</li>` because handling clicks looks like this: `<li on-click="{{ myClickHandler }}">blah</li>` I've tried using the way shown in the documentation here: declarative event mapping , but `on-mouseenter` and `on-mouseover` aren't working as expected. I'm also having trouble passing parameters to my handlers, but that's a different story.

Original source