title: A-Frame: Scaling a-box in EventListener: "this.el is undefined"
body: <p>I want to setup an EventListener in A-Frame (JS) that listens to the 'mouseenter'-event and rescales a box. I took the source from <a href="https://aframe.io/docs/0.9.0/guides/building-a-basic-scene.html#event-listener-component-intermediate" rel="nofollow noreferrer">this tutorial</a>. The EventListener fires every time I move the cursor on the box, but then the console shows</p>
  
  <pre><code>TypeError: this.el is undefined
  </code></pre>
  
  <p>referencing to this line of code:</p>
  
  <pre><code>this.el.object3D.scale.copy(data.to);
  </code></pre>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;script src="https://aframe.io/releases/0.9.2/aframe.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    AFRAME.registerComponent('scale-on-mouseenter', {
      schema: {
        to: {default: '10 10 10', type: 'vec3'}
      },
  
      init: function () {
        var data = this.data;
        this.el.addEventListener('mouseenter', function () {
          this.el.object3D.scale.copy(data.to);
        });
      }
    });
  &lt;/script&gt;
  ...
   &lt;a-box position="0 2 -5" scale-on-mouseenter&gt;
   &lt;/a-box&gt;
  </code></pre>
  
  <p>It also says:</p>
  
  <pre><code>core:schema:warn Default value `10 10 10` does not match type `vec3` in component `scale-on-mouseenter`
  </code></pre>