10.31前端笔记

 

1.懒加载
      - 懒加载的应用场景：在一些电商类平台网站上 由于页面要加载的数据量较庞大，因此如果直接将页面所有内容都加载出来，会导致页面的加载时间过长，导致页面白屏。

        因此，开发者们想出了懒加载的办法——只加载用户看得见的部分，看不见的部分不加载。这样单次加载的内容就相对较少，加载时间减短，从而提升用户体验。

  - 懒加载实现思路：

        - 第一步：先渲染图片结构，把图片资源先暂时给img的src1属性
        - 第二步：显示第一屏效果，只要图片的位置小于窗口可视高度就显示出来
            - 只加载可视区域内的照片
            - 窗口的可视高度 document.documentElement.clientHeight
            - 图片在页面中的位置  图片.offsetTop
            - 默认情况所有的图片都不显示  先将图片路径给自定义属性src1 如果要显示该图片将src1给src
        - 第三步：当页面滚动的时候，再次判断图片是否在可视范围内容
            - 判断范围：页面的可视高度+页面卷起的高度 document.documentElement.scrollTop + document.documentElement.clientHeight

2.事件对象

        事件对象：每一个事件都会有一个对象，这个对象用来记录和该事件有关的一些信息
      如何获取事件对象
        - 标准浏览器和IE浏览器：window.event
        - 低版本火狐浏览器：火狐低版本浏览器  在事件处理函数中的第一个参数就是事件对象
        - 兼容事件对象
        - window.event || 第一个参数

      事件对象中的属性

         1. altKey/shiftKey/ctrlKey:表示在执行事件的时候，是否同时按住alt shift ctrl键，执行的时候按住是返回true，否则返回false

         2. clientX/clientY：表示鼠标都可视窗口左侧和上侧的距离

         3. pageX/pageY:表示鼠标位置到页面左侧和上侧的距离，==存在IE兼容问题==
            - pageX = clientX + 页面卷起的宽度
            - pageY = clientY + 页面卷起的高度
            - 在IE低版本去获取pageX和pageY，因为在IE版本没有办法获取Pagex和pageY，所以我们可以用卷起的高度+clientx

         4.target:目标源/事件源，事件触发事件的元素，==存在IE兼容问题==
            - 标准浏览器：事件对象.target
            - IE低版本：事件对象.srcElement
            - type：添加事件的类型，没有on

3.事件绑定

      1.之前绑定事件

        - 语法：标签.事件类型 = function(){}
        - 缺点：同种事件类型一次只能绑定一个，后者会覆盖前者
      
      2.事件绑定

         基础语法

            - 标准浏览器:标签.addEventListener(事件类型(不加on),事件处理函数,事件捕获)
            - IE低版本浏览器:标签.attachEvent(事件类型(加on),事件处理函数)

      3.两者区别

        - 面试题：addEventListener和attachEvent事件绑定有什么区别?
            - addEventListener 事件类型不加on，有事件捕获，执行顺序从前往后执行
            - attachEvent  事件类型加on  没有事件捕获  执行顺序从后往前执行
    
      4.浏览器兼容

          - 事件绑定浏览器兼容    if(判断某个方法是否存在){}else{}

      5.事件绑定函数封装
          
          elem：绑定事件的标签  type：事件类型 fun：事件处理函数

4.事件取消

        1.之前的事件取消

            - 标签.事件类型 = null

        2.事件取消

            基础语法

            - 标准浏览器:标签.removeEventListener(事件类型(不加on),事件处理函数,是否捕获)
            - IE低版本:标签.detachEvent(事件类型(加on),事件处理函数)
        
        3.浏览器兼容
             
             / 浏览器兼容  事件取消 
            if (btn.removeEventListener) {
                btn.removeEventListener("click", fun1)
            } else {
                btn.detachEvent("onclick", fun1);
            }

        4.事件取消函数封装

               function unbind(elem, type, fun) {
            if (elem.removeEventListener) {
                elem.removeEventListener(type, fun)
            } else {
                elem.detachEvent("on" + type, fun);
            }

          }

5.事件流

        - 事件流：当事件发生的时候，事件在字符节点之间的固定传递顺序
        - 捕获型事件(标准)     冒泡性事件
     事件流会经历三个阶段
        - 捕获阶段：当事件发生的时候  事件从window开始往子元素传递
        - 确定目标：确定真正触发事件的元素
        - 冒泡阶段：目标源接受到事件之后开始处理事件，处理完成之后，会将事件从当前往父节点传递 直到window

        绑定事件 addEventListener(事件类型,事件处理函数,是否事件捕获) true事件捕获 false事件冒泡  默认是false

6.阻止事件冒泡

        - 标准浏览器  事件对象.stopPropagation()
        - IE低版本  事件对象.cancelBubble = true
        - 阻止事件冒泡兼容  
        -  ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

7.阻止默认行为

        有很多标签都是有默认行为的，例如：a标签的跳转、右键菜单、图片拖拽保存等等

        - return false; ==只适用用绑定方式是:标签.事件类型=function(){}==
        - 标准浏览器：事件对象.preventDefault()
        - IE低版本：事件对象.returnValue = false;
        - 阻止事件默认行为兼容
        -  ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

8.事件委托

        - 在我们需要添加大量事件的时候，为了节省性能，我们一般会用到事件委托(事件代理)
        实现场景：我们现在有10000个li标签，要给给每个li标签都添加点击事件，如果用for循环添加 需要执行的时间比较长，会浪费计算机性能 此时我们推荐用事件委托
     事件委托实现的思路
        - 给所有要添加事件元素的父元素添加事件
        - 在父元素执行的时候，找到目标源执行操作