事件创建中的Javascript绑定对象

javascript bind object in event creation

本文关键字：绑定 对象 Javascript 创建 事件      更新时间：2023-09-26

我实际上被困在一个简单的例子上。

<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>

当我创建事件时，通过绑定整个对象，当我点击第一个元素时，我应该获得"first"，当我点击第二个元素时，我应该获得"second"，但事实并非如此。对于我使用的其他对象，它是完全可用的，但这个简单的例子不起作用。

你不是在创建一个类，你是在创建一个对象。

所以每次你在那个对象上调用.created，你都在重写里面的元素。

尝试使用Object.create制作两个不同的对象

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'));

小提琴

如果你希望你的对象表现得像一个类，你可以像这样使用函数闭包:

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>

可以使用class，将this.element设置为element传递给构造函数

<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>

相关文章：