4 Replies Latest reply on Mar 14, 2016 1:58 PM by Gameboygandhi

    Assigning event listener to an array of buttons. -compacting code instead of repeating for each instance.

    Gameboygandhi

      Hi, My problem is as follows;

      I have quite a few movieclip instances that needs an eventlistener that triggers on "click", and from a practical viewpoint, and also cpu resource-wise (If I've understood correctly). I don't want to assign separate listeners to each object.

      (My knowledge of javascript and coding in general is very limited, so I can only get this to work if I add listeners to each and every instance...)

      I've made a map containing 20-ish movieclips of varying types representing the huts of a camping site. Each of these huts are assigned an array of properties like number of beds, rentalprice etc.

      When I click one of the huts, I need 3 textfields to list these properties.

       

      var hut_01 = ["1", "Name of hut 1", "3", "No", "45Euro", "15Euro", "-Simple stove \n-Fridge w/ small freezer" ]

      var hut_02 = ["2", "Name of hut 2", "6", "Yes", "65Euro", "25Euro", "-Large stove \n-Fridge w/ small freezer" ]

      etc.

       

      I've tried gathering these in a second array;

       

      var huts = ["hut_01", "hut_02", "hut_03" ...]

      for (var i = 0; i < huts.length; i++)

      {

        mySelection=huts[i];

      }

       

      And then tried assigning an event listener for the "huts[i]" array. but this does not seem to work.

       

      this.mySelection.addEventListener("click", listProp.bind(this));  // gives error;  "Cannot read property 'addEventListener' of undefined" 

      function listProp()

      {

        clickedObj=mySelection;

        this.numberHut.text = (clickedObj[0]);

        this.nameHut.text = (clickedObj[1]);

        this.aboutHut.text = ("Number of beds: " + clickedObj[2] + "\n" + "water: " + clickedObj[3] + "\n" + "Price wo/washing: " + clickedObj[4] + "\n" + "washing included: " + clickedObj[5] + "\n" + "This cabin is equipåped with: \n" + clickedObj[6]);

      }

       

      Can someone hlep me out with this conundrum and/or point me in the direction of a working example I can pick apart?

        • 1. Re: Assigning event listener to an array of buttons. -compacting code instead of repeating for each instance.
          ClayUUID Adobe Community Professional

          Gameboygandhi wrote:

           

          I have quite a few movieclip instances that needs an eventlistener that triggers on "click", and from a practical viewpoint, and also cpu resource-wise (If I've understood correctly). I don't want to assign separate listeners to each object.

           

          You have understood incorrectly. Assigning a listener to every object that needs to be listening is the correct way to do it. This does not consume mass quantities of CPU resources because nothing happens with a listener until you actually click on something. "Listener" is a horrible misnomer that causes people to form flawed mental models about how the event model works. It would be much more accurate for JavaScript to have called these event "subscribers" (as some languages do), because that's how it works under the hood—when you assign a listener for a particular event to an element, the browser just makes a note to call that function when the event comes up. There is nothing running in a loop actively "listening" for the event to happen. That would be silly and wasteful.

           

          Anyway, of course your code is erroring out, because arrays and strings don't have events.

           

          If you really want to know how the browser event model works, here's one of many articles that gives a decent overview of the subject:

          http://blog.bitovi.com/a-crash-course-in-how-dom-events-work/

          • 2. Re: Assigning event listener to an array of buttons. -compacting code instead of repeating for each instance.
            Gameboygandhi Level 1

            Thanks, you helped cleared things up quite a bit!

            However I'm still confused as to how I should go about solving this properly.

            The crux of my problem is; Is there a way to reuse a function called from the click-event and at the same time identifying which object was clicked?

            Something like:

            Pseudo:

            hutA [...]

            hutB [...]

            hutC [...]

             

            hutA.on("click", listMyStuff.bind(this));

            hutB.on("click", listMyStuff.bind(this)); //instead of doing listMyStuffB()

            hutC.on("click", listMyStuff.bind(this)); //instead of doing listMyStuffC()


            function listMyStuff()  //Superduper universal function that saves me from repeating it 20 times.

            {

                 clickedObj=HutA, B or C etc. you just clicked;

                 firstTextfield = (populate with clickedObj index [0]);

                 secondTextfield = (populate with clickedObj index [1]);

            }

            - doing it like this always makes clickedObj be the last one given the eventlistener and listMyStuff() as they seem to override eachother chronologically.

             

            Please forgive me if the answer is within the link you gave as I haven't had time to read through it properly yet.

            • 3. Re: Assigning event listener to an array of buttons. -compacting code instead of repeating for each instance.
              ClayUUID Adobe Community Professional

              When a click event handler is called, the two most important things to know are:

               

              "this" is set to the DOM element that triggered the event.

              The event handler executes in the global scope.

               

              For example if you set an ID on the element, this.id in the event handler would retrieve it. You could then use this to determine which button had been clicked.

               

              To deal with the scope issue, the easiest way is to set a global variable to the scope you'll need to access, like _mythis = this, then reference _mythis in the event handler.

              • 4. Re: Assigning event listener to an array of buttons. -compacting code instead of repeating for each instance.
                Gameboygandhi Level 1

                Thanks once again!

                I've been trying to fix this thing for hours on end, but I think your pinpointed answers helped more. Hopefully I will wrap my head around it tomorrow.