本文已参与「新人创作礼」活动，一起开启掘金创作之路。

事件流

事件流是什么

事件流指的是事件完整执行过程中的流动路径

当触发事件时会经历两个阶段,分别是捕获阶段、冒泡阶段.

事件流先是捕获从父级往下走，比如html-body-div-ul-li-a

然后后冒泡和捕获相反，从子级往上走比如a-li-ul-div-boyd-html

L0方式的设置监听固定式冒泡

L2方式设置监听可以设置为捕获，传入true表示捕获，默认为false（冒泡）

事件冒泡

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

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

也就是 触发子元素的事件会影响到父级的同名事件，这个现象称作冒泡

阻止冒泡

调用事件对象e中的方法 stopPropagation来阻止事件冒泡

  const f = document.querySelector('.f');
  const s = document.querySelector('.f>div');
  document.addEventListener('click', function () {
    alert('3')
  })
  f.addEventListener('click', function (e) {
    alert('2');
  })
  s.addEventListener('click', function (e) {
    alert('1');
    e.stopPropagation();
  })
//此时点击s区域就不会影响到父级

阻止默认行为

默认行为: 比如超链接跳转 form表单的跳转等

阻止这些默认行为我们需要调用事件对象e中的preventDefault方法

    const a  = document.querySelector('a');
    a.addEventListener('click',function(e){
      //阻止默认行为，也需要用事件对象e
      //使用e中的preventDefault方法
      e.preventDefault();
    })

解绑事件

我们可以绑定事件监听，也可以解绑事件监听

L0:

on方式的解绑直接将on事件 = null就可以了

  btn.onclick = null;

L2：

使用addEventListener的解绑需要使用removeEventListener，使用这个解绑方法要求其中addEventListener传入的函数必须是具名函数

 //L2方法解绑传入的调用函数必须是具名函数
    function fn() {
     alert('123');
   }
   btn.addEventListener('click', fn);  //绑定事件    
   btn.removeEventListener('click', fn); //解绑事件

鼠标经过事件的区别

鼠标经过事件：

mouseover 和 mouseout会有冒泡效果

mouseenter 和mouseleave 没有冒泡效果 (推荐)

事件委托

当我们需要给父元素下面的多个子元素添加监听时，需要遍历子元素，这样需要使用for循环一个一个注册监听

但如果我们使用事件委托，可以减少注册次数，提高了程序性能

事件委托的本质是 事件冒泡，子元素冒泡调用父元素的事件处理函数:给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件.

具体使用：主要是通过事件对象e中target的属性tagName 或者 className等来获取子元素对象

const ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
  if(e.target.tagName === 'LI'){
    e.target.style.color = 'blue';
  }
})
//上述代码中e.target就是点击的li元素

其它事件

页面加载事件- load

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

    window.addEventListener('load', function () {
        //当页面加载完成后在执行一下js代码
      const btn = document.querySelector('button');
      btn.addEventListener('click', function () {
        alert(55);
      })
    })

页面滚动事件 -scroll

当页面滚动时触发事件

    window.addEventListener('scroll', function () {
        console.log('页面滚动了');
    }

scroll系列-元素对象的属性

scrollWidth/scrollHeight获取元素内容区域的宽高

scrollLeft / scrollTop获取元素内容在水平和垂直滚动的距离

检测页面尺寸变化-resize

就是当我们缩放页面尺寸（拖动）时触发的事件

   window.addEventListener('resize', function () {
        console.log('页面尺寸变化了');
    }

client系列-元素对象的属性

获取元素可视区域宽高和位置

clientwidth / clientHeight : 可视区域宽高(内容 + padding)

注意: 如果盒子内容超出了, 此时获取的不包含超出的部分

clientLeft / clientTop: 可视区域位置（就是左边框和上边框宽度)

offset系列属性

offset系列-获取元素‘自身’的真实宽高和真实位置

offsetWidth / offsetHeight:获取的是盒子实际大小(内容+padding+border)

offsetLeft/ offsetTop:相对于定位父级元素的左边、上边距离 ,如果父级元素没有定位，那么就继续往上面找，如果都没有定位就相对于body

Js-WebApi-事件流

事件流

事件流