前端案例：我的备忘录（支持事件的增加、删除和修改，代码完整）

本案例未使用任何框架，均使用 js 原生以及 DOM 操作实现，代码完整，复制即用。

---

目录

一、案例效果

二、涉及要点

1. 事件监听

2. DOM 节点操作

（1）常用节点获取方法

（2）常用节点信息获取方法

（3）常用节点属性获取方式

（4）DOM 修改

（5）DOM 添加

（6）DOM 删除

3. DOM 控制 CSS 样式

（1）通过 style 属性控制样式

（2）通过classList控制样式：

三、完整代码+详细注释

---

一、案例效果

如下图，备忘录可添加新事件，对事件进行编辑，删除已有事件，对完成的事件进行标注。

二、涉及要点

1. 事件监听

事件源要与事件绑定后，才能触发对应事件，事件绑定有三种方式：行内事件属性赋值、事件属性赋值、事件监听。

本案例使用了事件监听的方式进行事件绑定，与其他两种方式的区别在于事件属性多次赋值则只会执行最后一次事件处理程序；而事件监听可以添加多个监听器，执行多个事件处理程序。

事件监听格式为：

addEventListener(type, listener, useCapture)

//type: 事件类型
//listener: 监听器ÿ