JS-事件流

事件流

• 事件冒泡和捕获是普遍存在的现象，需要知道
• 通过事件流可以得知事件执行的顺序

事件流：整个事件在执行过程中的流动的过程

事件的三个阶段：

1.事件的捕获阶段：从外往内去查找事件源的过程

2.事件的目标阶段（触发自己的事件）

3.事件的冒泡阶段：从内往外依次触发

事件冒泡

当一个元素的事件被触发时，同类型事件将会在该元素的所有祖先元素从内往外依次被触发，这一过程称为事件冒泡。

说白了就是：当我们触发了子元素的某个事件后，父元素对应的事件也会在之后触发

注意点：事件冒泡必然发生，与元素是否注册了事件无关

事件默认显示的就是事件冒泡过程。

例子：需求 给父子元素都注册点击事件，点击子元素查看效果

当点击最里层.sun时，看到结果：

当点击.son层时，看到结果：

当点击.father层时，看到结果：

这就是事件冒泡的过程：

事件捕获

• 当一个元素的事件被触发时，同样的事件将会在该元素的祖先元素从外往内依次被触发，这一过程称为事件捕获。
• 可以通过addEventListener的第三个参数设置为true，表示当前事件在捕获阶段触发

同样是上述例子：

当点击最里层.sun层时，结果如下：

当点击.son层时，结果如下：

事件捕获的过程：

注意点：事件流有三个阶段

​ 1.事件捕获阶段

​ 2.目标阶段

​ 3.事件冒泡阶段

事件对象拓展

阻止浏览器默认行为

• 任何事件对象（鼠标事件、键盘事件）都有e.preventDefault()方法，可以用来阻止默认行为
• 比如：a标签点击跳转就可以通过上面说的方法来阻止

例子：需求 给a标签注册点击事件，点击之后弹框

解决方法：

• return false; 只能写在事件处理函数的最后，因为这条语句之后的代码不会执行，且不能阻止addEventListener的默认行为（不推荐使用）
• e.preventDefault(); 可以写在事件处理函数的任意位置，且之后的代码可以执行（推荐使用）

注意点：针对addEventListener注册事件的方式，需要使用e.preventDefault()才能阻止默认行为

阻止事件冒泡

• 通过e.stopPropagation()方法阻止事件冒泡，而阻止事件冒泡，就可以将事件限定在当前元素内

例子：需求 给father和son分别注册点击事件，需要点击father只触发father的事件，点击son只触发son的事件

此时点击.son层，结果如下：

事件委托

• 利用事件流的特征解决一些开发需求的技巧，说白了就是将事件委托给目标元素的父元素，利用事件冒泡的特点，点击目标元素即触发父元素的事件

例子：需求 让每个li标签点击之后，让当前li标签的文字变红

优点：给父级元素添加事件（可以提高性能）

原理：事件委托其实是利用事件冒泡的特点，给目标元素的父元素添加事件，子元素点击时经过事件冒泡阶段触发父元素的事件

实现：事件对象.target可以获得真正触发事件的元素

// 方法1：给所有li添加事件，利用排他思想，先干掉所有人，再复活自己
let lis = document.getElementsByTagName('li')
for(let i = 0; i< lis.length; i++) {
  lis[i].addEventListener('click', function() {
    for(let j = 0; j< lis.length; j++) {
      lis[j].classList.remove('red')
    }
    this.classList.add('red')
  })
}

// 方法2：给li的父元素ul添加事件，利用事件冒泡，点击li触发ul的事件
// e.target即为真正触发事件的元素，它是被点击的具体对象
let ul = document.querySelector('ul')
ul.addEventListener('click', function(e) {
  for(let i = 0; i< lis.length; i++) {
    lis[i].classList.remove('red')
  }
  e.target.classList.add('red')
})