Javascript 一个函数用于多个元素

Javascript 一个函数用于多个元素,javascript,html5-canvas,kineticjs,Javascript,Html5 Canvas,Kineticjs,我目前正在画布上绘制元素: var head = new Kinetic.Ellipse({ x: stage.width() / 2, y: 100, radius: { x: 50, y: 60 }, fill: '#DDDDDD', stroke: 'black', strokeWidth: 2 }); var neck = new Kinetic.RegularP

我目前正在画布上绘制元素:

  var head = new Kinetic.Ellipse({
    x: stage.width() / 2,
    y: 100,
    radius: {
            x: 50,
            y: 60
        },
    fill: '#DDDDDD',
    stroke: 'black',
    strokeWidth: 2
  });

  var neck = new Kinetic.RegularPolygon({
    x: stage.width() / 2,
    y: 180,
    sides: 4,
    radius: 70,
    fill: '#DDDDDD',
    stroke: 'black',
    strokeWidth: 2
  });

layer.add(neck);
layer.add(head);
当点击或触摸时改变这些元素的颜色,但我会在屏幕上有很多元素,不想用相同的功能改变每一个

有没有一种方法可以把下面的两个结合起来成为一个函数,但却影响上面的两个

  head.on('touchstart, mousedown', function() {
    var current = this.getFill();
    var fill = "";
    switch (current) {
      case "#DDDDDD":
      fill = "#FFC926";
      break;
      case "#FFC926":
      fill = "#FF0000";
      break;
      case "#FF0000":
      fill = "#000000";
      break;
      default:
      fill= "#DDDDDD";
    }
    this.setFill(fill);
    layer.draw();
  });

  neck.on('touchstart, mousedown', function() {
    var current = this.getFill();
    var fill = "";
    switch (current) {
      case "#DDDDDD":
      fill = "#FFC926";
      break;
      case "#FFC926":
      fill = "#FF0000";
      break;
      case "#FF0000":
      fill = "#000000";
      break;
      default:
      fill= "#DDDDDD";
    }
    this.setFill(fill);
    layer.draw();
  });

您可以提取一个公共函数,并像下面那样使用它

 var evaentListener =  function(obj) {
    return  function() {
        var current = obj.getFill();
        var fill = "";
        switch (current) {
          case "#DDDDDD":
          fill = "#FFC926";
          break;
          case "#FFC926":
          fill = "#FF0000";
          break;
          case "#FF0000":
          fill = "#000000";
          break;
          default:
          fill= "#DDDDDD";
        }
        obj.setFill(fill);
        layer.draw();
    }
}

head.on('touchstart, mousedown',evaentListener(this));

neck.on('touchstart, mousedown',evaentListener(this));