title: Event listeners in ar.js
body: <p>I am developing a project which involves ar.js that is displaying 3d objects and text to teach children the alphabet on both mobile devices and laptops. I was trying to add an event listener as an extra to make the children interact more. My target is to click/touch on the model displayed and it will enlarge or change color or rotation. Attached find my code. Hopefully you could solve my issue.</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  &lt;script src = "https://aframe.io/releases/1.0.3/aframe.min.js"&gt;&lt;/script&gt;   
          &lt;script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"&gt;&lt;/script&gt; 
          &lt;script src = "event.js"&gt;&lt;/script&gt;
          &lt;script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"&gt;&lt;/script&gt;
       &lt;/head&gt;   
      &lt;body&gt;
  &lt;a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'&gt;
  &lt;a-assets&gt;
                  &lt;a-asset-item id = "apple" src = "apple/scene.gltf"&gt;&lt;/a-asset-item&gt;
          &lt;/a-assets&gt;
   &lt;a-marker id = "appleM" type = "pattern" url = "Asset/pattern-apple.patt"
          markerhandler emitevents = "true" cursor="rayOrigin: mouse"&gt;
  
              &lt;a-entity id = "animatedApple" gltf-model = "#apple" position = "0 -1 0" scale = ".05, .05, .05"&gt;&lt;/a-entity&gt;
  
              &lt;a-text value="A for Apple"  color = "purple" position = "-1.3 1 0" scale = '2, 2, 2'&gt;&lt;/a-text&gt;
  &lt;/a-marker&gt;
  &lt;a-entity camera&gt;&lt;/a-entity&gt;
        &lt;/a-scene&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>event.js (file for the event handlers)</p>
  
  <pre><code>init: function() {
          const animatedMarker = document.querySelector('#appleM');
          const aEntity = document.querySelector('#animatedApple');
  
          // every click, we make our model grow in size :)
          animatedMarker.addEventListener('click', function(ev, target){
              const intersectedElement = ev &amp;&amp; ev.detail &amp;&amp; ev.detail.intersectedEl;
              if (aEntity &amp;&amp; intersectedElement === aEntity) {
                  const scale = aEntity.getAttribute('scale');
                  Object.keys(scale).forEach((key) =&gt; scale[key] = scale[key] + 1);
                  aEntity.setAttribute('scale', scale);
              }
          });
  }});
  
  </code></pre>