文章目录
一、事件
1.1 什么是事件？
定义：用户和文档或浏览器窗口发生的交互行为。
例如：点击按钮、鼠标移动，按下键盘上的某个键、关闭窗口等。
1.2 事件的三要素
- 事件源。在谁身上绑定，谁就是事件源。
- 事件类型。点击、双击、鼠标移入移出。
- 事件处理函数。
1.3 事件类型的分类
- 鼠标事件
- 键盘事件
- 浏览器事件
- 表单事件
- 触摸事件（移动端）
- 其他事件
1.4 书写一个事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件的处理函数
1.5 鼠标事件的类型
- click 鼠标左键单击
- dblclick 鼠标左键双击
- contextmenu 鼠标右键单击（菜单键）
- mousedown 鼠标按下（只要是鼠标上的按键都可以）
- mouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标移入
- mouseout 鼠标移出
- mouseenter 鼠标移入
- mouseleave 鼠标移出
二、操作元素的属性
1、原生属性。 class id style css name type src herf
2、自定义属性。用户自己设置的属性，例如:index=“1”
3、H5新增的自定义属性。data-开头
2.1 操作元素的原生属性
格式：
1、获取：元素节点.属性名
2、设值：元素节点.属性名 = “属性值” （之前有，就是修改）
tips:不论给元素设置的是什么类型的数据，获取到的都是字符串类型的返回值。
点语法只能获取元素的原生属性，不能获取（设置）元素的自定义属性。
2.2 操作元素的自定义属性
格式：
1、获取：元素节点.getAttribute("属性名“)
2、设值：元素节点.setAttribute(“属性名”，”属性值“)
3、删除：元素节点.removeAttribute("属性名”)
【注意】这一套方法也可以操作元素的原生属性。
2.3 H5新增自定义属性
- 元素上有一个data属性，他是一个对象，里面放着所有设置在元素上的H5自定义属性。
- 属性名是以data-开头的属性，里面的属性名就是data-后面的值。
- 格式
1、获取： 元素节点.dataset.属性名
2、设值或修改：元素节点.dataset.属性名 = “新的属性值”
另外一种写法： 元素节点.dataset[属性名] = “新的属性值”
3、删除：delete 元素节点.dataset.属性名
【注意】dataset的这一套方法有兼容性问题，ie11以上的浏览器才支持使用。
三、操作元素的类名
3.1 className
作用：通过修改元素的class属性来达到修改元素样式的目的。
1、获取：元素.className
2、设值或修改：元素.className = “class属性的属性值”
3、删除：元素.className = " " ； 不写类名即为删除。
tips:本质是给元素的className属性赋值，后面的值会覆盖前面设置过的属性值。
3.2 classList
- H5提供了一套便于我们操作类名的方法。
- 在元素节点对象上有一个className属性，里面包含了元素所有设置的类名。
1、 获取： 元素.classList 获取到包含全部类名的数组
2、 新增类名： 元素.classList.add(“类名”)
3、 删除类名：元素.classList.remove(“类名”)
4、切换类名：元素.classList.toggle(“类名”)
【注意】
元素.classList.toggle(“类名”)
当元素有这个类名时，使用此方法，是把这个类名删除；当没有这个类名时，使用此方法，就是新增这个类名。