Question

我有以下课程，但遇到了两个问题：

我只能让它在现有元素上工作，但是我需要为以后将动态创建的元素声明它。我认为需要检查事件监听器，也许使用MutationObserver ...现在我已经远远超出了我的深度...
如果我确实创建了条形图的两个实例，则对于确实存在的两个元素，则当我将鼠标向下或鼠标向上移动时，它们似乎针对同一元素。我相信这是因为我使用的是原型，而不是这个。但是，如果我使用this.mousedown = func ...，我将无法正常工作。

var bar = (function(){
  var me = this;
  function bar(id){
    me._id=id;
  }
  
  bar.prototype.mousedown=function(code){
    el().addEventListener('mousedown', code, false);
    return this;
  }
  
  bar.prototype.mouseup=function(code){
    el().addEventListener('mouseup', code, false);
    return this;
  }
  
  this.el=function(){
    return document.getElementById(me._id);
  };
  this.css=function(){
    return el().style;
  };
  
  return bar;
})();

然后我将其用于现有元素，在我的jsfiddle中使用ID为batman的DIV。

不要过多地关注css（）函数和颜色变化，这些只是用于测试。希望最终代码中可以包含一些ajax调用等。

function foo(s){
  return new bar(s);
}

foo("batman")
  .mousedown(
    function(e){
      css().background="green";
    }
  )
  .mouseup(
    function(e){
      css().background="orange";
    }
  );

full jsbin code with sample

Answer 1

var me = this;：此处，this引用了window变量，因为您不在对象内部。因此，当您创建bar的另一个实例（函数声明的第3行）时，me._id=id;会覆盖先前的ID，因为this引用没有改变。

使用更加面向对象的方法。

var bar = function(id){
  this.id=id;
}

bar.prototype.element=function(){
    return document.getElementById(this.id);
}

bar.prototype.css=function(){
    return this.element().style;
}

bar.prototype.mousedown=function(code){
    var that = this;
    this.element().addEventListener('mousedown', function(e){
      code(that);
    }, false);
    return this;
}
  
bar.prototype.mouseup=function(code){
  var that = this;
  this.element().addEventListener('mouseup', function(e){
      code(that);
  }, false);
  return this;
}

function foo(s){
  return new bar(s);
}

foo("batman")
  .mousedown(
    function(obj){
      obj.css().background="green";
    }
  )
  .mouseup(
    function(obj){
      obj.css().background="orange";
    }
  );

foo("batman2")
  .mousedown(
    function(obj){
      obj.css().background="green";
    }
  )
  .mouseup(
    function(obj){
      obj.css().background="orange";
    }
  );

.mydiv{
  background-color:#e72629;
  padding:5px;
  color:#ffffff;
  text-align:center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  
  <div class="mydiv" id="batman">
  hello world!
</div>
  
  <div class="mydiv" id="batman2">
  hello world 2!
</div>

  
</body>
</html>

动态创建元素上的类中的JavaScript事件

1 个答案: