Привязка живых элементов заканчивается на »SyntaxError:« [объект HTMLElement] »не является допустимым селектором« в пользовательской библиотеке JavaScript - PullRequest
Новая
       65

Привязка живых элементов заканчивается на »SyntaxError:« [объект HTMLElement] »не является допустимым селектором« в пользовательской библиотеке JavaScript

0 голосов
/ 31 октября 2019

Когда я пытаюсь внедрить живые события в мою библиотеку, я получаю консоль с сообщением

SyntaxError: '[объект HTMLElement]' не является допустимым селектором

Я думаю, чтобы понять, что проблема в том, что когда я вызываю myEventHandler() внутри on(), первым аргументом является весь объект nodeList, полученный из querySelectorAll, верно?

Но как дать только тот селектор, который былназывается? Или это весь мой способ сделать просто чушь ?? Я сейчас очень растерялся ... :(: D 

function qs(selector, context) {
  return (context || document).querySelector(selector);
}

function myEvent(event, t, handler) {
  event.attachEvent ? event.attachEvent('on' + t, handler) : event.addEventListener(t, handler);
}

function myEventHandler(selector, event, callback, context) {
  myEvent(context || document, event, function(e) {
    if (qs(selector)) {
      var x = e.target || e.srcElement,
        index = -1;
      while (x && ((index = Array.prototype.indexOf.call(qs(selector), x)) === -1)) x = x.parentElement;
      if (index > -1) callback.call(x, e);
    }
  });
}

var $ = function(s) {
  var x;
  var obj = {
    myLib(s) {
      return x || document.querySelectorAll(s);
    },

    myFunction(s) {
      if (s.startsWith('data-')) {
        x = [x[0].closest('*[' + s + ']')];
        return x[0].getAttribute(s);
      } else {
        x = [x[0].closest(s)];
        return this;
      }
    },

    // events (live)
    on(event, callback, context) {
      x.forEach(z => {
        myEventHandler(z, event, callback, context);
      }); // the z as first argument is stupid, right? 
      return this;
    }

  };
  x = obj.myLib(s);
  return obj;
};

////////// usage example
$('#clickMe').on('click', function() {
  var myDataValue = this.myFunction('data-wrestler');
  console.log(myDataValue);
});
<div id="foxtrott">
  foxtrott
  <div class="uniform" data-wrestler="hulkster">
    uniform
    <div class="charlie">
      charlie
      <div class="kilo">
        <button id="clickMe">click me</button>
      </div>
    </div>
  </div>
</div>
...