DOM面试

Posted on

1. DOM事件模型

  1. 冒泡
  2. 捕获
  3. 如果这个元素是被点击元素，那么执行顺序由监听顺序决定

2. 移动端的触摸事件

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    //说明触摸开始
    document.body.ontouchstart !== undefined
    //触摸开始移动
    canvas.ontouchmove = function (ev) {
      var x = ev.touches[0].clientX;  //触摸的x坐标
      var y = ev.touches[0].clientY;
    }
    ontouchend  //触摸结束
    ontouchcancel  //触摸取消，因为有的浏览器不会触发touchend事件

  2. 模拟swipe事件（滑动）
    记录两次touchmove的位置差，若后一次在前一次的右边，说明向右滑了

3. 事件委托

  1. 监听父元素，看被触发的是哪个儿子，就是事件委托，委托父亲监听儿子
  2. 优点是可以监听动态生成的儿子，减少了事件处理程序的数量，整个页面占用的内存空间会更少。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function listen(element,eventType,selector,fn){
      element.addEventListener(eventType,(e)=>{
        let el = e.target
        while(!el.matches(selector)){  //可能点击的是li里的span  
          if(element === el){  //如果点击的是父元素，则跳出监听
            el =null
            break
          }
          el = el.parentNode
        }
        el&&fn.call(el,e,el)
      })
      return element
    }

    //<ul id="list">
    //  <li></li>
    //  ...
    //</ul>
    //let list=document.querySelector('#list')
    //listen(list,'click','li',()=>{})