实现一个防抖二级导航目录涉及到的知识点

this和event.target的差别

  • 每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值;
  • this和event.target的区别:this是事件冒泡,是可变化的,先触发内部事件,由内到外的执行。但event.target不会变化,它永远是直接接受事件的目标DOM元素;
  • .this和event.target都是dom对象
  • 在导航中,我们经常遇到<li><a>子目录</a></li>这样一个结构,我们要忽略内部的a,使得在li上任意移动都可以触发事件,就要使用$(this)

CSS定位relative/absolute/fixed

property usage
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
  • relative对absolute有限制作用,通常我们通过对要进行absolute定位的元素的父元素,添加定位relative;使得子元素相对于父元素进行定位。
  • relative对overflow有限制作用;如果子元素长宽比父元素大,overflow不能阻止溢出,需要父元素overflow:hidden并且position:relative。

参考:链接

事件委托

  • 内存和性能:在js中,添加到页面的事件处理程序数量将直接影响到页面的整体运行性能。导致这一问题的原因是多方面的:① 每个函数都是对象,会占用内存;② 必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。③ 内存中留有过时不用的“空时间处理程序(dangling event handler)”。
  • 事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,而不必给每个子元素添加事件。
  • 移除事件处理程序:问题3可能的情况:1. 如果事件被innerHTML删除了,那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。可以将事件处理程序置为null或者使用事件委托 2. 如果在页面被卸载之前没有清理干净事件处理程序,那么它们就会滞留在内存中。每次加载完页面再卸载,内存中滞留的对象数目就会增加,因为事件处理程序占用的内存并没有释放。可以在页面卸载之前通过onunload时间处理程序移除所有事件处理程序。

防抖函数

  • 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
  • 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
    function debounce(method, delay) {
    let timer = null;
    return function() {
      let that = this,
          args = arguments;
      timer && clearTimeout(timer);
      timer = setTimeout(function() {
        method.apply(that, args);
        },delay);
    }
    }
    

    节流函数

  • 定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。
  • 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
    function throttle(method, mustRunDelay) {
    let timer, args = arguments, start;
    return function Loop() {
      let that = this;
      let now = Date.now();
      if(!start) {
        start = now;
      }
      if(timer) {
        clearTimeout(timer);
      }
      if(now - start >= mustRunDelay) {
        method.apply(that, arges);
        start = now;
      } else {
        timer = setTimeout(function() {
          Loop.apply(that, args);
          }, 50);
      }
    }
    }
    

tips: 这里有个坑是这些存储在本地环境中,使用ie浏览器会报错

参考博客:


 上一篇
JQuery实现简单的TodoList JQuery实现简单的TodoList
效果如下 HTML表格<div class="container"> <div class="row"> <div class="col-md-5 todo"> <form id="todo
2016-08-27
本篇 
实现一个防抖二级导航目录涉及到的知识点 实现一个防抖二级导航目录涉及到的知识点
this和event.target的差别 每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.targ
2016-07-02
  目录