Add one ore more Event Listeners

Add one ore more Event Listeners

Topic Progress:

Add one ore more Event Listeners

<script>
   document.addEventListener("DOMContentLoaded", function(event) {
      var box1 = document.querySelector('#box1');
      console.log("Geometry: " + box1.getAttribute('geometry').primitive);
      var heightBox1 = box1.getAttribute('geometry').height;
      console.log("Height Box1: " + heightBox1);
   });
</script>

When you need commands which are executed immediately, just add them after line 6.

Add after line 6 the click Event in case you want to manipulate an object when looking at it for a longer time or click it with the mouse

<script>
   document.addEventListener("DOMContentLoaded", function(event) { 
      var box1 = document.querySelector('#box1');
      console.log("Geometry: " + box1.getAttribute('geometry').primitive);
      var heightBox1 = box1.getAttribute('geometry').height;
      console.log("Height Box1: " + heightBox1);
      box1.addEventListener('click', function () {
         box1.setAttribute('position', {x: 0, y: 0, z: -2});
         box1.setAttribute('material', {color: 'blue'});
         console.log("Height Box1: " + box1.getAttribute('geometry').height);
      });
   });
</script>

In the left image we see the cursor and the red box. When clicking on it (or looking at it for a longer time), the position and color of theĀ  box changes (right picture).

In stead of choosing click as an event handler, we could use mouseenter (and mouseleave). The change happens immediately:

<script>
   document.addEventListener("DOMContentLoaded", function(event) { 
      var box1 = document.querySelector('#box1');
      console.log("Geometry: " + box1.getAttribute('geometry').primitive);
      var heightBox1 = box1.getAttribute('geometry').height;
      console.log("Height Box1: " + heightBox1);
      box1.addEventListener('mouseenter', function () {
         box1.setAttribute('position', {x: 0, y: 0, z: -2});
         box1.setAttribute('material', {color: 'blue'});
         console.log("Height Box1: " + box1.getAttribute('geometry').height);
      });
   });
</script>

To bring back the object when looking at another object, we need the mouseleave event:

<script>
   document.addEventListener("DOMContentLoaded", function(event) { 
      var box1 = document.querySelector('#box1');
      console.log("Geometry: " + box1.getAttribute('geometry').primitive);
      var heightBox1 = box1.getAttribute('geometry').height;
      console.log("Height Box1: " + heightBox1);
      box1.addEventListener('mouseenter', function () {
         box1.setAttribute('position', {x: 0, y: 0, z: -2});
         box1.setAttribute('material', {color: 'blue'});
         console.log("Height Box1: " + box1.getAttribute('geometry').height);
      });
      box1.addEventListener('mouseleave', function () {
         box1.setAttribute('position', {x: 0, y: 0, z: 0});
         box1.setAttribute('material', {color: '#FF0000'});
         console.log("Height Box1: " + box1.getAttribute('geometry').height);
      });
   });
</script>
Comments are closed.