20200914冯强_日志

学习总结

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("向下滚动")
    }
    }

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1