学习总结

event事件

​ 事件是浏览器自己触发的或用户手动触发的页面内容的状态的改变

​ 浏览器自带的事件 如 onclick

​ 自定义监听事件 如 元素.addEventListener(“事件名”, 事件处理函数)

1. 事件名不要带on前缀。因为DOM标准的事件名，都是没有前缀的，比如: click, mouseover, change,…
2.  事件处理函数，既可以是匿名函数，又可以是有名称的函数
3. 移除监听事件
    1. 如果移除用 onclick=function(){} 方式绑定的处理函数，可用 onclick=null，只会移除掉由 onclick=function(){} 方式绑定的事件处理函数
    2.  元素.removeEventListener("事件名",原处理函数)原处理函数必须是有名函数

DOM标准事件模型包含三个阶段

​ 捕获阶段

​ 当事件发生时，浏览器从根节点 document 开始，由外向内浏览当前触发事件的元素的各级父元素，并记录各级父元素上绑定的相同事件处理函数。但是，该阶段只记录，不调用

​ 目标触发

​ 优先触发当前点击的这个目标元素上的事件处理函数

​ 冒泡执行

​ 浏览器会按捕获阶段记录的各级父元素上绑定的事件的反向顺序，由内向外执行各级父元素上的事件处理函数提示：一个页面中的多个dom如果呈现父子类关系，并且都绑定了事件，则会有事件冒泡的情况发生

    如：<div onclick="alert('3');">
<div onclick="alert('2');">
     <a id ="show" href="#" onclick="alert('1');">
           测试冒泡
      </a>
</div></div>

如果需要阻止事件冒泡，可以为div添加“阻止事件冒泡”

true为捕获开始 false为冒泡 默认为false

事件对象

1. ​ 当事件发生时自动创建的封装事件信息的并提供操作事件的API的对象
2. ​ 不用我们自己创建，事件对象默认作为处理函数的第一个参数传入
3. btn.onclick=function( e ){
   // 事件对象e，所有形参都可以改名
   }
4. 取消冒泡/停止蔓延e. stopPropagation();
5. e.stopPropagation() 只阻止外层事件的执行，不阻止当前元素自己事件的执行。所以，在当前元素处理函数中，e.stopPropagation() 写前写后无所谓。对当前元素的事件执行都没有影响

6. 取消事件/阻止默认行为有些元素上自带了一些默认行为，比如a标签默认回到页面顶部，默认会在url结尾添加#a.onlick=function(e){
   e.preventDefault();
   }

7. 获取鼠标位置坐标e.screenX/screenY

8. 相对于浏览器中网页的左上角e.clientX/clientY

9. 相对于触发事件元素的左上角e.offsetX/offsetY

10. div.onmousemove=function(e){
    console.log(e.screenX,e.screenY)
    }

页面滚动

1. ​ 页面滚动事件window.onscroll
2. 获得页面滚动的高度（当前页面在窗口中向下滚动了多少距离）
3. 注意：在不同的浏览器中，有些能识别document.body.scrollTop，有些能识别document.documentElement.scrollTop。如果document.body.scrollTop为0则document.documentElement.scrollTop不为0，反之亦然
4. 兼容写法var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
5. window.onmousewheel=document.onmousewheel=function(e){...}onmousewheel事件
6. window.onmousewheel=document.onmousewheel=function(e){
   if(e.wheelDelta>0){
   console.log("向上滚动")
   }else{
   console.log("向下滚动")
   }
   }