HTML部分：
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="taskInput" placeholder="请输入任务">
<button id="addButton">添加</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>
JavaScript部分（app.js）：
// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');
// 事件处理函数
function addTask() {
const taskText = taskInput.value;
if (taskText.trim() !== '') {
const taskItem = document.createElement('li');
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
taskInput.value = '';
}
}
// 绑定事件
addButton.addEventListener('click', addTask);
taskInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
addTask();
}
});
这个示例实现了一个简单的待办事项列表，用户可以输入任务，并点击"添加"按钮或按下回车键来添加任务。添加的任务会以列表项的形式显示在页面上。代码中，我们使用了DOM API来获取和操作页面上的元素，并使用事件监听器来处理用户的输入操作。
首先，在HTML部分，创建了一个简单的页面结构。页面包含一个标题（h1元素）、一个文本输入框（input元素）、一个添加按钮（button元素）和一个任务列表（ul元素）。每个元素都使用了唯一的id属性，以便我们可以在JavaScript中通过id来获取对应的DOM元素。
接下来，在JavaScript部分，我们首先使用document.getElementById方法获取到了DOM元素。
taskInput是输入框元素，用于输入要添加的任务。addButton是按钮元素，当用户点击它时，会调用addTask函数来添加任务。taskList是列表元素，用于展示任务列表。
然后，我们定义了一个名为addTask的事件处理函数。在该函数中，我们首先获取到用户在输入框中输入的文本，并使用trim方法去除输入的前后空格。如果输入的文本不为空，则创建一个新的列表项（li元素），并将输入的文本内容赋值给该列表项的textContent属性。然后，我们将该列表项追加到任务列表（taskList）中，并将输入框清空。
最后，我们使用事件监听器来绑定事件。通过addEventListener方法，我们为按钮元素的点击事件添加了一个监听器，当用户点击按钮时，会调用addTask函数。另外，我们还为输入框元素的keydown事件添加了一个监听器，当用户按下回车键时，同样会调用addTask函数。
这样，当用户在输入框中输入任务并点击"添加"按钮或按下回车键时，JavaScript代码会将新的任务项添加到任务列表中，实现了待办事项列表的功能。
可以将上述代码保存为index.html和app.js两个文件，在同一个文件夹下打开index.html文件，即可在浏览器中看到待办事项列表的界面。如果在输入框中输入任务并点击"添加"按钮或按下回车键，新的任务项将会添加到列表中。
