Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2018, 17:43
Аспирант
Отправить личное сообщение для marc Посмотреть профиль Найти все сообщения от marc
 
Регистрация: 02.12.2017
Сообщений: 81

Кастомное событие
Здравствуйте, помогите с задачей пожалуйста. Надо создать кастомное событие, которое будет происходить при нажатии на кнопку "btn-generate"(вызывается событие на элементе ul). При этом к списку ul каждый раз добавляется li с текстом "Item" + номер li(Item 3, Item 4...) А хранить номер последнего добавленного Item в свойстве counter который в event(использовать как счётчик для Item).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn-msg">Show message</button>
<button id="btn-generate">Generate item</button>
<p><strong id="tag">Tag:</strong></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
 
 
 
<script src="main.js"></script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2018, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

marc,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn-msg">Show message</button>
<button id="btn-generate">Generate item</button>
<p><strong id="tag">Tag:</strong></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>



<script>
window.addEventListener("DOMContentLoaded", function() {
    var ul = document.querySelector("ul"),
        btn = document.querySelector("#btn-generate");
    btn.addEventListener("click", function(e) {
        ul.dispatchEvent(myEvent);
    });
    ul.addEventListener("addItem", function(e) {
        this.appendChild(e.detail.li);
    });
    var myEvent = new CustomEvent("addItem", {
        detail: {
            counter: 2,
            get li() {
                var node = document.createElement("li");
                node.appendChild(document.createTextNode("Item " + ++this.counter));
                return node;
            }
        },
        bubbles: true,
        cancelable: false
    });
});
</script>
</body>
</html>

Последний раз редактировалось рони, 17.02.2018 в 19:12.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
событие mouse up Trues Общие вопросы Javascript 4 05.05.2015 23:58
Событие onload SP7 Общие вопросы Javascript 4 10.11.2013 23:50
Событие click Гробовщик jQuery 1 31.07.2013 07:28
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46
какое событие возникает во время формирования html IT-AleX Events/DOM/Window 2 20.02.2009 16:13