事件

事件三要素

• 事件源 —— 谁触发事件，先要获取到触发事件的对象
• 事件类型 —— 如何触发事件，通过用户的什么样的行为触发
• 事件处理程序 —— 事件触发后做什么，执行什么样的程序

获取元素

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()

事件委托

1. 先获取需要操作的元素的父级元素（不限于亲父级）
2. 做出条件判断，通过e.target对象的键值对来锁定对应的元素 来操作