Форум

werty1001 · #1 (**permalink**) 05.07.2014, 17:08

Привет всем, есть вопрос к опытным юзерам - нужна поддержка живых кликов для динамического контента, в jquery был "live", но он вроде как слишком много "ел" и на смену пришел "on". Мне нужен был аналог "on" на "голом" js и я сварганил такой код:

document.addEventListener("click", function(event) {
    var el = event.target;
    if (el.hasAttribute("data-show")) {
        document.querySelector("[data-div="+ el.getAttribute('data-show') +"]").className += " show";
    }
    if (el.hasAttribute("data-close")) {
        document.querySelector("[data-div="+ el.getAttribute('data-close') +"]").className="";
    }
});

Собственно мне интересно такой код нормален с точки зрения производительности? Или есть более изящное и легкое решение? Заранее спасибо за ответ.

Sweet · #2 (**permalink**) 05.07.2014, 17:15

Норм.

рони · #3 (**permalink**) 05.07.2014, 18:15

werty1001,

Вариант для современных браузеров

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  [data-div].show{
   display: block;
 }
  [data-div] {
    display: none;
  }
div{
  cursor: pointer;
  display: inline-block;
}

  </style>
  <script>
    document.addEventListener("click", function(event) {
    var el = event.target,
    show = el.dataset.show,
    close = el.dataset.close;
    el = show || close;
    if (el) {
        document.querySelector("[data-div='"+ el +"']").classList[show ? "add" : "remove"]("show");
    }

});

  </script>
</head>

<body>
   <div data-show="Menu">Show</div>
   <div data-close="Menu">Close</div>
   <div data-div="Menu">Memu</div>
</body>
</html>

werty1001 · #4 (**permalink**) 07.07.2014, 22:56

рони,
Спасибо за вариант, но нужна поддержка хотя бы 9-го ослика.

Sweet, Ясно в общем я так понял мой вариант тоже вполне сносный.

BETEPAH · #5 (**permalink**) 07.07.2014, 23:26

werty1001,
вполне, если нет статичного родителя ближе, чем document

Форум

Справочник

Discord чат

Курсы javascript