前端面试总结第一天第三题：事件模型

三、事件模型

1、定义

事件是用户与浏览器产生交互的时浏览器中发生的动作，其本质是程序各个组件之间的一种通讯方式。
今天所讲的事件。主要是DOM事件

2、DOM事件流

DOM结构是一个树型结构，当一个html元素产生事件后，该事件会在元素节点与根节点之间按照一定的顺序传播。路径所经过的节点丢回接收到该节点的事件。然后做出相应的反应。这个过程称为DOM事件。

3、两种事件顺序

事件捕捉和事件冒泡
首先我们先明白事件传播的三个阶段
1.事件捕获阶段
2.事件目标阶段
3.冒泡阶段

冒泡事件：
事件像水泡一样从底部一直到顶部，对应在DOM 树中，就是事件由子节点沿着DOM树一直向上传递，直到不确定的目标元素
冒泡事件的思想是：事件从特定的目标事件开始到最不确定的目标

捕获事件：
从顶部一直到目标元素，有DOM 树最顶层元素一直到最精确的元素，

知道两种事件后，DOM标准同时支持两种事件模型，但捕获事件是优先发生的两种事件都是从document开始，document结束

4、事件监听函数

用于响应某个事件而调用的函数，称为事件处理函数。
每个事件都对应一个事件监听函数。
当浏览器检测到某个事件发生时，就会自动去查找该事件对应的监听函数

几种事件监听：

注：event：原生的全局事件，其本质是一个构造函数、

IE事件监听函数是attachEvent
attachEvent一个元素可以添加多个事件，attachEvent哟两个参数
第一个参数是事件类型名（on开头的）
第二个参数是eventListener 回调处理函数
移除attachEvent对应的函数是：datechEvent方法

注：使用dateEvent方法时参数必须和attachEvent一样

DOM标准事件监听：
addEventListener函数同时支持事件冒泡和事件捕获
有三个参数：
1、事件类型名（不需要on）
2、eventListener回调处理函数
3、布尔值false为冒泡事件，true为捕捉事件

有了事件冒泡和事件捕获，在实际应用中就有需要阻止事件冒泡和阻止浏览器的默认行为

5、停止事件冒泡

两种方式：
1,在要要触发的点击事件函数中 写 window.event.cancelBubble = true 这种方法 IE 和谷歌 支持,而火狐不支持

2,在事件处理函数中传入一个对象参数, 在函数中添加 对象参数.stopPropagation;

防止事件对上层事件的影响

function stopBubble(e) {     if (e.stopPropagation) { 
        e.stopPropagation(); 
    } 
    else { 
        //才用IE的停止事件冒泡的方法 
        //window.event.CancelBubble = true; 
        e.cancelBubble = true; 
    } 
} 

6、阻止浏览器的默认行为

JS浏览器的默认行为及阻止行为