学js的第十五天

1.懒加载

• 懒加载的应用场景

  • 在各大电商平台的网站上,由于页面需要记载很多很多图片，如果直接网页上的所有的图片都加载出来，数据比较庞大，会导致页面加载过程，页面会出现白屏效果，对用户体验不友好

• 懒加载的实现思路

  • 在页面加载的时候 判断哪些内容是在用户的可视区域，只加载用户可视范围的内容，看不见的部分暂时不加载，等滚动条滚动到该区域的时候，再起加载图片

• 实现代码

   var list = document.getElementsByTagName("ul")[0];
          // 1.追加结构
          // 如果直接将结构给innerHTML 会一直重写，也会影响页面性能 所以先将结构给一个空字符串，再将空字符串给页面结构
          var str = "";
          for (var i = 0; i < arr.length; i++) {
              // innerHTML有重写的功能
              str += `
  
                         
                      
  `
          }
          list.innerHTML = str
  ​
          // 2.显示第一屏效果
          /* 
              只要在页面的可视范围内  都将图片显示出来
                  页面的可视范围高度   doucument.documentElement.clientHeight
                  图片在页面中的位置   图片.offsetTop
                  图片显示出来     将自定义属性src1 给src属性
          */
          var oImg = document.getElementsByTagName("img");
          var pageClientHeight = document.documentElement.clientHeight;
          console.log(pageClientHeight)
          for (var i = 0; i < oImg.length; i++) {
              if (oImg[i].offsetTop <= pageClientHeight) {
                  console.log("这是第一屏效果", "这是第" + i + "张图")
                  oImg[i].src = oImg[i].getAttribute("a")
              }
          }
  ​
          // 2.页面滚动  显示可视范围内容的数据
                /*
                    页面的范围：页面的可视高度+页面卷起的高度
                */    
          window.onscroll = function () {
              // 页面卷去的高度
              var sT = document.documentElement.scrollTop || document.body.scrollTop
              for (var i = 0; i < oImg.length; i++) {
                  if (oImg[i].offsetTop <= (pageClientHeight + sT)) {
                      console.log("第" + i + "张图", "window.onscroll判断")
                      oImg[i].src = oImg[i].getAttribute("a")
                  }
              }
          }

2.事件对象

2.1什么是事件对象

• 每一个事件都有事件对象 这个对象中用来记录和该事件有关的一些信息

• ==注意==：在事件处理函数中才可以使用事件对象

• 如何获取事件对象

  • 标准浏览器和IE浏览器 window.event

  • 老版本火狐浏览器 在事件处理函数中的第一个参数作为事件对象

• 事件对象兼容

  • 标签.事件类型 = function(eve){ var ev = window.event || eve }

2.2事件对象中的属性

• altKey/shiftKey/ctrlKey

  • 作用：用户在执行事件的时候，有没有同时按住alt shift ctrl键 如果按住了返回值为true，否者为false

• clientX和clientY

  • 作用：获取鼠标的位置 表示鼠标位置相对于可视窗口左侧和上侧的距离

• pageX和pageY

  • 作用：获取鼠标位置 表示鼠标位置到页面左侧和上侧的距离

    • pageX = clientX + 卷去的宽度

    • pageY = clientY + 卷去的高度

  • ==注意pageX和pageY存在IE低版本兼容问题 可以通过其他方式获取==

    • document.body.scrollLeft + clientX

    • document.body.scrollTop + clientY

• target(标准浏览器)/srcElement（IE低版本）

  • 作用：表示添加事件中实际触发的元素

2.3事件对象的相关练习

2.3.1元素跟随鼠标移动

2.3.2卡屏效果

2.4事件绑定和封装

事件绑定有两种方式

2.4.1普通方式绑定

• 标签.事件类型 = function(){ //要做的事 }

• 缺点：不能给同一个标签添加多次同事件类型

   // 1.普通方式绑定
          // 第一个人的逻辑
          btn.onclick = function(){
              console.log("第一次按钮")
          }
          // 第二个人的逻辑
          btn.onclick = function(){
              console.log("第二次按钮")
          }
          btn.onmouseover = function(){
              console.log("移入按钮")
          }

2.4.2事件绑定

• 标准浏览器的事件绑定

  • 标签.addEventListener(事件类型(不加on)，事件处理函数，是否捕获(默认值是false))

      // addEventListener  基础用法
        btn.addEventListener("click",function(){
            console.log("第一次按钮");
        })
        btn.addEventListener("click",function(){
            console.log("第二次按钮")
        })
​
        // 将函数提出来
        function btn1(){
            console.log("第一次按钮");
        }
        btn.addEventListener("click",btn1)
​
        function btn2(){
            console.log("第二次按钮")
        }
        btn.addEventListener("click",btn2)

• IE低版本浏览器

  • 标签.attachEvent(事件类型(加on)，事件处理函数)

       // 2.IE低版本浏览器
        var  add = document.getElementsByTagName("button")[1];
        add.attachEvent("onclick",function(){
            console.log("ie低版本浏览器第一次执行")
        })
        add.attachEvent("onclick",function(){
            console.log("ie低版本第二次执行")
        })

2.4.3两者绑定有什么区别

• addeventListener 和attachEvent有什么区别

  • addeventListener 事件类型不需要加on 执行顺序是正序 从上到下 有事件捕获

  • attachEvent 事件类型需要加on 执行顺序是倒叙 从后往前执行 没有事件捕获、

2.4.4 事件绑定浏览器兼容

 // 4.方法兼容   如果是两个方法的兼容 判断某个方法是否为true
        function fun1(){
            console.log("这是兼容")
        }
        var add1 = document.getElementsByTagName("button")[2];
        if(add1.addEventListener){ //标准浏览器
            // 标签.addEventListener(事件类型，事件处理函数)
            add1.addEventListener("click",fun1)
        }else{ // IE低版本浏览器
            // 标签.attachEvent(事件类型，事件处理函数)
            add1.attachEvent("onclick",fun1)
        }