JavaScript事件处理模型 — 事件冒泡、捕获

悠悠 2022-05-19 01:22 250阅读 0赞

### 事件冒泡 ###

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

### 事件捕获 ###

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上） IE没有捕获事件

### 触发顺序 ###

先捕获，后冒泡 focus，blur，change，submit，reset，select 等事件不冒泡

![0_1293708442iQ1z.gif][]

例子：[ CodePen链接][CodePen]

这里有3个嵌套的div，每一个div都绑定了一个点击时间

![70][]          这三个重叠的div从内到外分别为 inner，center，outer

我们知道，addEventListener（type,  function , isCatchStyle）方法的第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

当第三个参数是**false**，事件在**冒泡过程**被捕获，我们点击最内层绿色div，可以看到绑定事件的执行顺序是**从内向外**的。

![70 1][]

当第三个参数是**true**，事件在**捕获过程**被触发，我们点击最内层绿色div，可以看到绑定事件的执行顺序是**从外向内**的。

![70 2][]

###  取消冒泡和阻止默认事件 ###

**取消冒泡：**

W3C标准 event.stopPropagation();但不支持ie9以下版本 IE独有

event.cancelBubble = true;

封装取消冒泡的函数 stopBubble(event)

function stopBubble(event){
    	if(event.stopPropagation){
    		event.stopPropagation();
    	} else {
    		event.cancelBubble = true;
    	}
    }

**阻止默认事件:**

默认事件 — 表单提交，a标签跳转，右键菜单等

1.return false;  以对象属性的方式注册的事件才生效  
例子： 右键点击页面执行一个函数但不执行默认事件（出现菜单）

document.oncontextmenu = function (){
    	console.log('a');
    	return false;
    }

2.event.preventDefault(); W3C标准，IE9以下不兼容

3.event.returnValue = false; 兼容IE 封装阻止默认事件的函数 cancelHandler(event);

封装一个方法，记住方法调用完了在外面还是要return false；

function cancelHander(event){
    	if(event.preventDefault){
    		event.preventDefault();
    	} else {
    		event.returnValue = false;
    	}
    }

阻止a标签的跳转和跳到页面顶部的常用写法：

<a href="javascript:void(false)">点我没反应</a>

[0_1293708442iQ1z.gif]: /images/20220519/cb90e0b49b3242318a853bd32860a0ee.png
[CodePen]: https://codepen.io/huyao/pen/YjWgwX
[70]: /images/20220519/e852d3d0d3f44ea0973c2810242a619b.png
[70 1]: /images/20220519/9968ae10b3cd4e60b5f54bafb9ef43c9.png
[70 2]: /images/20220519/7d05e11f970e4a0eaa2efe0de03d2395.png