js事件与事件流

事件

一、事件监听

1、事件元素.addEventListener('事件类型'，事件处理函数)

2、事件元素.on事件类型（事件处理函数）

区别：on会被覆盖，而addEventListener可以绑定多次

二、事件类型

1、鼠标事件：click鼠标点击        mouseenter鼠标经过      mouseleave鼠标离开

2、焦点事件：focus获得焦点     blur失去焦点

3、键盘事件：keydown键盘按下触发   keyup键盘抬起触发

4、文本事件:input  表单输入触发

三、事件对象

这个对象里有事件触发时的相关信息

btn.addEventListener('click'，function( e))

常用属性

type

  获取当前的事件类型

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

  key

用户按下的键盘键的值

排他思想

比如tab栏切换

首先把所有带有active的类名都去掉，再给自己加上active类名

 for (let i = 0; i < list.length; i++) {
      // 触发某个tab的鼠标经过事件
      list[i].addEventListener('mouseenter', function (e) {
        //排他思想  先干掉所有人  （先把有类名acive的去除
        document.querySelector('.tab-nav .active').classList.remove('active');
        //自己添加上类名
        this.classList.add('active')
        //再解决图片 
        document.querySelector('.tab-content .active').classList.remove('active')

        tab[i].classList.add('active')
      })

    }

事件流

一、事件捕获

二、事件冒泡

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

btn.onclick()这种事冒泡形式

三、阻止冒泡

e.stopPropagation()

我们也可以用阻止默认行为来阻止冒泡

e.preventDefault()

四、解绑事件

1、使用on事件方式，直接用null覆盖

btn.οnclick=null

2、addEventListener方式，必须使用：

removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

btn. removeEventListener('click',fn)

事件委托

优点：减少注册次数

做法：利用冒泡的特点，给父级注册事件，当触发子级时就会冒泡到父级身上，从而触发事件

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

其他事件

一、页面加载事件

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

window.addEventListener('load',function(){})

2、当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完 全加载

document.addEventListener('DOMContentLoaded',function(){{)

二、页面滚动事件

window.addEventListener('scroll',function(){})

scrollLeft和scrollTop （属性） 是被卷去的大小

需要检测页面滚动头部距离的话使用document.documentElement.scrolltop

滚动到指定的坐标scrollTo（x,y） 

三、页面尺寸事件

窗口尺寸变化会触发的事件resize

clientWidth和clientHeight获取可见元素的宽和高

元素尺寸与位置

offsetWidth和offsetHeight获取的是可是高宽，以父级为准，没有父级以大盒子为准（只读元素）