javascript bind object in event creation

Question

I'm actually getting stuck on a simple (pretty sure it is) example.

<div id="first">first</div>
<div id="second">second</div>
<script>
    var JSClass = {
        element : null,
        click : function() {
            console.log(this.element.id);
        },
        created : function(element) {
            this.element = element;
            this.element.addEventListener('click', this.click.bind(this));
        }
    };
    JSClass.created(document.querySelector('#first'));
    JSClass.created(document.querySelector('#second'));
</script>

By binding the entire object when I create the event I should obtain "first" when I click on the first element and "second" when I click on the second element but it's not the case. It's fully functional for other objects I use but this simple case doesn't work...

There's just one object involved. When you call .created() the second time, it overwrites the value of the "element" property that was set when you called it the first time. — Pointy
– Pointy, Commented Nov 6, 2016 at 17:06

Gabs00 · Accepted Answer · 2016-11-06 17:10:23Z

1

You aren't creating a class, you are creating an object.

So each time you call .created on that object, you are overwriting the element inside.

Try using Object.create to make two different objects

var JSClass = {
    element : null,
    click : function() {
        console.log(this.element.id);
    },
    created : function(element) {
        this.element = element;
        this.element.addEventListener('click', this.click.bind(this));
    }
};

var first = Object.create(JSClass);
var second = Object.create(JSClass);

first.created(document.querySelector('#first'));
second.created(document.querySelector('#second'));

fiddle

answered Nov 6, 2016 at 17:10

Gabs00

1,8771 gold badge13 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aarto Over a year ago

You're right about the "class" vs "object". It's a mistake from my side. Along my description I only speak about objects and the name of my object is JSClass ;)

Christian Zosel · Accepted Answer · 2016-11-06 17:10:55Z

1

If you want your object to behave like a class, you can make use of function closures like this:

var JSClass = function(element) {
  this.element = element;
  element.addEventListener('click', click.bind(this)); 
  
  function click() {
    console.log(this.element.id);
  }
};

new JSClass(document.querySelector('#first'));
new JSClass(document.querySelector('#second'));

<div id="first">first</div>
<div id="second">second</div>

edited Nov 6, 2016 at 17:10

answered Nov 6, 2016 at 17:08

Christian Zosel

1,4241 gold badge9 silver badges16 bronze badges

Comments

guest271314 · Accepted Answer · 2016-11-06 17:14:38Z

0

You can use class, set this.element to element passed to constructor

<div id="first">first</div>
<div id="second">second</div>
<script>
  class JSClass {
    constructor(element) {
      this.element = element;
    }
    created() {
      this.element
        .addEventListener('click', this.click.bind(this));
    }
    click() {
      console.log(this.element.id);
    }
  };
  let first = new JSClass(document.querySelector('#first'));
  let second = new JSClass(document.querySelector('#second'));
  first.created();
  second.created();
</script>

answered Nov 6, 2016 at 17:14

guest271314

1

1 Comment

Aarto Over a year ago

Thanks, I think that's the best modern way to do this.

Collectives™ on Stack Overflow

javascript bind object in event creation

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related