美文网首页
js面试问题

js面试问题

作者: gtt21 | 来源:发表于2017-07-14 21:45 被阅读0次

    1.编写一个通用的事件监听函数
    2.描述事件冒泡流程
    3.对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
    知识点

    通用事件绑定
    //标准方法
    var btn=document.getElementById('btn1') btn.addEventListener('click',function(e){ console.log('clicked'); }) //封装事件绑定 function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var a=document.getElementById('link1') myBindEvent(a,'click',function(e){ e.preventDefault() //阻止默认行为 alert('link1 has clicked') })
    IE低版本使用attachEvent绑定事件,和W3C标准不一样
    事件冒泡
    <div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> <script type="text/javascript"> function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var p1=document.getElementById('p1') var body=document.body myBindEvent(p1,'click',function(e){ e.stopPropagation() //阻止冒泡 alert('激活') }) myBindEvent(body,'click',function(e){ alert('取消') }) </script>
    点击p1,弹出激活,如果没有e.stopPropagation(),事件将继续向上冒泡找到body的alert('取消')
    代理
    <div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> </div>
    <script type="text/javascript"> function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var div1=document.getElementById('div1') myBindEvent(div1,'click',function(e){ var target=e.target //获取要绑定事件的元素 if(target.nodeName==='A'){ alert(target.innerHTML) } }) </script>
    点击每一个a标签弹出对应的标签内的内容
    解题

    1.编写一个通用的事件监听函数

    function myBindEvent(elem,type,selector,fn){
      if(fn==null){
        fn=selector
        selector=null
      }
      elem.addEventListener(type,function(e){
        var target
        if(selector){
          // 代理
          target=e.target
          if(target.matches(selector)){ //判断目标节点是否和选择器匹配
            fn.call(target,e)
          }
        }else{
          // 不使用代理
          fn(e)
        }
      })
    }
    
    //使用代理
    var div1=document.getElementById('div1')
    myBindEvent(div1,'click','a',function(e){
      e.preventDefault()
      console.log(this.href);
    })
    
    //不使用代理
    var btn1=document.getElementById('btn1')
    myBindEvent(btn1,'click',function(e){
      console.log(btn1.innerHTML);
    })
    

    2.描述事件冒泡流程

    DOM树形结构
    事件冒泡
    阻止冒泡
    3.对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
    使用代理

    相关文章

      网友评论

          本文标题:js面试问题

          本文链接:https://www.haomeiwen.com/subject/powohxtx.html