Кастомное событие
Здравствуйте, помогите с задачей пожалуйста. Надо создать кастомное событие, которое будет происходить при нажатии на кнопку "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>
|
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>
|
| Часовой пояс GMT +3, время: 21:37. |