1. 事件冒泡与事件捕获的出现
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。
1.事件的三个阶段: 先捕获,后目标,再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发
事件经过所有元素都没有被处理,这个事件消失
事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系
事件捕获
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
上面的例子在事件捕获的概念下发生click事件的顺序应该是
document --> html --> body --> div --> p
事件冒泡
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是
p --> div --> body --> html --> document
示例1:
在 addEventListener() 中:
1、可以添加三个参数事件名、函数、布尔值
2、省略或将 第三参数 参数设置为 false,将注册冒泡阶段的事件。所以,事件监听器默认监听冒泡事件。
<div class="big">大
<div class="mid">中
<div class="smail">小</div>
</div>
</div>
<script>
var smail = document.querySelector('.smail')
var mid = document.querySelector('.mid')
var big = document.querySelector('.big')
function boxname() {
console.log(this.innerText)
}
smail.addEventListener('click', boxname, false);
mid.addEventListener('click', boxname, false);
big.addEventListener('click', boxname, false);
</script>
3、将 第三参数 参数设置为 true,将注册捕获阶段的事件。所以,事件监听器默认监听冒泡事件。
<div class="big">大
<div class="mid">中
<div class="smail">小</div>
</div>
</div>
<script>
var smail = document.querySelector('.smail')
var mid = document.querySelector('.mid')
var big = document.querySelector('.big')
function boxname() {
// console.log(this.innerText)
console.log(this.className)
}
smail.addEventListener('click', boxname, true);
mid.addEventListener('click', boxname, true);
big.addEventListener('click', boxname, true);
</script>