事件
事件三要素
- 事件源 —— 谁触发事件，先要获取到触发事件的对象
- 事件类型 —— 如何触发事件，通过用户的什么样的行为触发
- 事件处理程序 —— 事件触发后做什么，执行什么样的程序
获取元素
DOM的对象
注册事件
元素对象.addEventListener('事件类型', function(e) {事件处理程序的代码块}, boolean)
事件类型
常用：（其他的百度）
- click 鼠标点击事件
- mouseenter 鼠标移入事件（没有冒泡）
- mouseleave 鼠标移出事件（没有冒泡）
- focus 获得焦点事件
- blur 失去焦点事件
- input 监听表单变化
- keydown 某个键盘按键被按下（需要配合
事件对象.key的值来确定按键） - keyup 某个键盘按键被松开（需要配合
事件对象.key的值来确定按键） - load 加载事件（当其他的都加载好了之后触发回调函数，一般给window添加）
事件处理程序
操作元素
- innerText —— 非标准，不能识别html标签，去除空格和换行（基本上只有文本）
- innerHTML —— W3C标准，可以识别html标签，保留空格和换行（可以通杀，我喜欢）
语法：元素对象.innerHTML = 内容同样，没有赋值就是取值
操作元素属性
- 内置属性：
元素对象.属性名 = 值( 没有赋值就是取值) - 自定义属性：
- 自定义属性的命名规范：
data-自定义属性名 - 修改：
element.dataset.自定义属性名 = 值( 没有赋值就是取值) - 获取：
element.getAttribute('属性名') - 设置：
element.setAttribute('属性名', '值') - 移除：
element.removeAttribute('属性名')
- 自定义属性的命名规范：
操作元素样式属性
- 行内样式操作：
element.style.样式名 = '样式' - 类名样式操作：
-
element.className = '类名1 类名2'会覆盖原先的的类名 -
element.classList.add('类名1, 类名2')在原有基础上添加新的类名 -
element.classList.remove('类名1, 类名2')移除传入的类名 -
element.classList.toggle('类名')若没有这个类名就添加，若有这个类名就移除 -
element.classList.contains('类名')判断元素是否有此类名，返回boolean值
-
事件对象
在事件绑定的回调函数中的第一个参数，就是事件对象（event/ev/e）
其中有事件触发时的相关信息
常用事件对象的属性
-
clientX/clientY获取光标相对于浏览器可视区域窗口左上角的位置 -
offsetX/offsetY获取光标相对于当前dom元素窗口左上角的位置 -
key用户按下键盘上的值 target事件目标，
真正触发事件的元素对象，也是在委托事件处理函数中唯一能操作的依靠e.target
事件流
事件捕获
从外到内，从上到下，从大到小
事件冒泡
从内到外，从下到上，从小到大
如果父容器也绑定了和子元素的同名事件，那么父容器的事件也会触发，由此可作为委托事件的依据
阻止事件流动
可以把事件限制在当前元素内（阻止事件捕获&事件冒泡）
语法：事件对象.stopPropagation()
阻止默认事件行为
一般用于阻止超链接的默认跳转行为，和表单元素submit的默认提交行为
语法：事件对象.preventDefault()
事件委托
- 先获取需要操作的元素的父级元素（不限于亲父级）
- 做出条件判断，通过
e.target对象的键值对来锁定对应的元素 来操作
