Javascript 如何使用Snap.SVG对单个SVG元素做出独特的响应？

我已经找了几个小时了，但没有任何东西（包括相关的StackOverflow线程）能让我更接近。这个问题看起来很简单，但它显然不是基于我所能找到的信息的缺乏

我正在尝试使用Snap.svg制作一个交互式钢琴，您可以单击每个键，它将播放各自的音符。到目前为止，我已经尝试了两种方法：

方法1： 一个简单的FOR循环，用于生成所有rect并添加事件侦听器

<script>
  window.onload=init();
  var S=Snap(500,100);
  var w=15;  var h=100;

  function init() {
    for (i=0;i<10;i++) {
      S.rect(i*w,0,w,h).attr{(id:i)}.click(console.log(this.id));
    }
  }
</script>

window.onload=init（）；
var S=Snap（500100）；
var w=15；var h=100；
函数init（）{
对于（i=0；i，这里有一种方法包括两种方法。在第一个示例中，括号中的attr错误

此外，单击处理程序必须将函数作为参数，这样“this”将是正确的


编辑：我添加了两种可以从不同角度使用的方法

 r.data('key', new Key( i )); 

将对象作为数据元素关联到捕捉对象

 r.click( clickHandler.bind(r, key2));

将对象绑定到处理程序，以便将其作为参数传递

这是全部内容。根据哪种方法效果最好，您可以将其缩短一点

var w=15;  var h=100;

function altKey( id ) {
   this.id='anotherkeymethod ' + id;
};

function Key(id ) {
    this.id='key' + id;
};

function init() {
    var r, key2;

    for (i=0;i<10;i++)      {
        key2 = new altKey( i );

        r = S.rect(i*w,0,w,h)
             .attr({ id:i, fill: 'blue' });

        r.data('key', new Key( i ));          // Method 1
        r.click( clickHandler.bind(r, key2)); // Method 2

    }
  }

function clickHandler( myKeyEl ) {
    console.log(this.id, this.data('key'), myKeyEl);
};

init();

var w=15；var h=100；
功能键（id）{
this.id='anotherkeymethod'+id；
};
功能键（id）{
this.id='key'+id；
};
函数init（）{
var r，键2；
对于（i=0；i
var w=15;  var h=100;

function altKey( id ) {
   this.id='anotherkeymethod ' + id;
};

function Key(id ) {
    this.id='key' + id;
};

function init() {
    var r, key2;

    for (i=0;i<10;i++)      {
        key2 = new altKey( i );

        r = S.rect(i*w,0,w,h)
             .attr({ id:i, fill: 'blue' });

        r.data('key', new Key( i ));          // Method 1
        r.click( clickHandler.bind(r, key2)); // Method 2

    }
  }

function clickHandler( myKeyEl ) {
    console.log(this.id, this.data('key'), myKeyEl);
};

init();