Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2014, 17:08
Интересующийся
Отправить личное сообщение для werty1001 Посмотреть профиль Найти все сообщения от werty1001
 
Регистрация: 21.12.2012
Сообщений: 23

Живой клик, аналог on в JavaScript
Привет всем, есть вопрос к опытным юзерам - нужна поддержка живых кликов для динамического контента, в 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="";
    }
});


Собственно мне интересно такой код нормален с точки зрения производительности? Или есть более изящное и легкое решение? Заранее спасибо за ответ.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2014, 17:15
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Норм.
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2014, 18:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Делегировние без jquery
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>
Ответить с цитированием
  #4 (permalink)  
Старый 07.07.2014, 22:56
Интересующийся
Отправить личное сообщение для werty1001 Посмотреть профиль Найти все сообщения от werty1001
 
Регистрация: 21.12.2012
Сообщений: 23

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

Sweet, Ясно в общем я так понял мой вариант тоже вполне сносный.
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2014, 23:26
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
КАК сэмулировать клик мышкой на элементе из javascript? Brook Events/DOM/Window 13 24.04.2012 23:14
нужна функция аналог slideToggle, только на Javascript Telnet jQuery 4 04.10.2011 11:43
Есть ли в JavaScript аналог функции exec() из php? lorddarkside Общие вопросы Javascript 3 22.12.2010 12:37
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34