我想通过我从第一个事件创建的按钮创建第二个事件。我不知道如何获取ID为btn_event_2
的按钮并将其保存到变量中,就像我在第一个事件上所做的那样,因此我无法在第二个按钮上创建事件侦听器。任何建议,谢谢。
let btnEvent1 = document.getElementById("btn_event_1");
let sectionA = document.getElementById("eventDemo");
function createElements(){
let newHeader = document.createElement("h1");
let newButton = document.createElement("button");
let newHeaderContent = document.createTextNode("Hello World 2");
let newButtonContent = document.createTextNode("click me");
newHeader.appendChild(newHeaderContent);
newButton.appendChild(newButtonContent);
newButton.setAttribute("type", "button");
newButton.setAttribute("id", "btn_event_2");
sectionA.appendChild(newHeader);
sectionA.appendChild(newButton);
}
btnEvent1.addEventListener("click", function(){
createElements();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Event Demo 3</title>
</head>
<body>
<section id="eventDemo">
<h1>Hello World</h1>
<button type="button" id="btn_event_1">click me</button>
</section>
</body>
<script src="demoEvent.js"></script>
</html>
像已经开始使用新创建的按钮一样简单地使用addEventListener。
您可以简单地将事件侦听器附加到newbutton,因为您已经在createElement
功能中引用了newbutton。
最合适的方法是使用JavaScript event delegation
u根据您的事件创建添加事件列表并分配功能在此功能内,如果匹配按钮,您将检查您的按钮ID,然后其余操作]]