DOM面试

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',()=>{})