事件流

从页面接收事件的顺序

三种模型：

事件冒泡：事件开始从具体的元素接收。然后逐级向上传播到较为不具体的元素。（建议使用）
事件捕获：不太具体的节点更早接收事件，而具体的元素最后接收事件。
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。（捕获阶段不会涉及目标事件）

事件处理程序

事件就是用户或浏览器自身执行的某种动作，比如click，load都是事件的名字。而响应某个事件的方法就是事件处理程序（事件监听器）。事件处理程序名字以"on"开头

HTML内联方式

on+事件名，如onclick（不建议使用）

<input type='text' onclick="console.log(2)">

JavaScript指定事件处理程序

事件处理程序在元素的作用域下运行。事件处理程序通过this访问元素的任何属性和方法。

以这种方式添加的事件处理程序，会在事件的冒泡阶段被处理。

缺点：不可添加多个程序处理。

var btn = document.querySelector('.btn');
btn.onclick = function(){
console.log(this.innerHtml);
}

btn.onclick = null //删除

DOM2事件处理程序

用于处理指定和删除事件处理程序的操作：

addEventListener()
removeEventListener()

接受三个参数：

事件类型
事件处理方法
布尔参数（true在捕获阶段，false在事件冒泡阶段）

优点：可添加多个事件处理程序。

通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除。但是通过addEventListener()添加的匿名函数无法移除。

var btnClick = document.querySelector('#btnClick');
btnClick.addEventListener('click',function(){
    alert(this.id);
},false);

冒泡/捕获实例

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event。

只有在事件处理程序执行期间，event对象才会存在。

重要：

target 事件触发节点，用来实现事件代理
stopPropagation() 阻止事件冒泡传播
preventDefault() 阻止默认行为

将事件处理程序指定给目标元素，则这三个(target,this,currenttarget)包含相同的值。

实例

stopPropagation()

用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

参考：segmentfault.com/a/119000001…

实例

preventDefault()

默认行为指的是阻止浏览器默认行为

可用于在文本编辑域或者复选框中阻止其默认行为。

实例

事件代理

事件代理利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

参考：juejin.cn/post/684490… （快递员的例子举得好）

事件代理是对"事件处理程序过多"问题的解决方案。

使用事件代理只需在DOM树上尽量最高的层次上添加一个事件处理程序。

用于后期新增的元素

实例

常用的html事件

鼠标事件

实例

click: 单机鼠标按钮/回车键触发。
dblclick: 双击鼠标按钮。
mousedown: 鼠标按钮被按下。
mouseup: 鼠标按钮被释放弹起。
mouseover: 鼠标悬浮在元素上
mouseout: 将悬浮在元素上的鼠标移出
mousemove: 鼠标移动
mouseenter（不冒泡）: 鼠标进入
mouseleave（不冒泡）: 鼠标离开

UI事件

load: 页面完全加载后在window上触发
select: 元素被选中
resize: 浏览器的窗口大小被改变时触发
scroll: 滚动条位置发生变化时触发
move: 浏览器窗口被移动时触发

焦点事件

blur: 在元素失去焦点时触发（不冒泡）
focus: 在元素获得焦点时触发（不冒泡）
change: 元素失去焦点且元素内容发生改变时触发
submit: 表单被提交时触发
reset: 表单中reset属性被激活时触发
input: 在input元素内容修改后立即被触发

JS事件

事件流