Событие JavaScript в классе на динамически созданном элементе

Question

Событие JavaScript в классе на динамически созданном элементе

1

У меня есть класс ниже, но у меня есть две проблемы:

Я могу заставить его работать только с существующими элементами, но мне нужно объявить его для элементов, которые позже будут созданы динамически. Я считаю, что проверка на eventlistener необходима, и, возможно, с помощью MutationObserver... и теперь я так далеко от моей глубины...
Если я создаю два экземпляра бара, для двух элементов, которые существуют, тогда, когда я mousedown или mouseup, они, похоже, нацелены на один и тот же элемент. Я считаю, что это потому, что я использую прототип, а не это. Но я не могу заставить его работать, если я использую 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 DIV с id batman.

Не уделяйте слишком много внимания функции css() и изменениям цвета, которые предназначены только для тестирования. Окончательный код, надеюсь, будет иметь некоторые вызовы ajax и т.д. Внутри них.

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

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

полный код jsbin с образцом

Jason 30 окт. 2018, в 17:17

Источник

Теги:

javascript

addeventlistener

1 ответ

Ещё вопросы

SystemGlitch · Accepted Answer · 2018-10-30T13-00-00.000Z

var me = this; : Здесь this относится к переменной window потому что вы не внутри объекта. Поэтому, когда вы создаете другой экземпляр bar (функция, объявленная строкой 3), me._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>

Большое спасибо, именно то, что мне нужно, и выглядит намного лучше. Как насчет динамически упакованного элемента, который еще не существует. Добавление foo ("batman3") теперь без HTML-кода выдает ошибки.
@Jason Этот код должен работать для динамически создаваемых элементов, потому что он получает элемент по id через document.getElementById() .
проверьте здесь, я переименовал batman2 в batman3 в коде JS. В html такого элемента нет, и он выдает ошибки в консоли. JSBIN ссылка
@Jason Тогда просто проверьте, возвращает ли element() undefined .
благодарю вас. Я сделал это с моим предыдущим кодом, и он просто не работал, но он работает с кодом, который вы мне дали ... отлично. благодарю вас!!!
Но после динамического создания элемента и присвоения ему имени «batman3», как заставить работать события bar ()? Нужно ли обновить дом или что-то, чтобы он знал, что он существует?
@Jason Вам необходимо создать элемент DOM до того, как вы создадите свой объект, или функции bar.mousedown() и bar.mouseup() не получат элемент через element() и, следовательно, не смогут зарегистрировать событие.
Давайте продолжим эту дискуссию в чате .