《前端JavaScript面试技巧》学习笔记(7) 事件

问题

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

知识点

• 通用事件绑定

<input type="button" id="btn1" value="按钮1">
<a href="http://jianshu.com" id="aLink">简书</a>

//标准方法
    var btn = document.getElementById('btn1');
    btn.addEventListener('click', function(e) {
        console.log('checked')
    })
//封装事件绑定
    function blindEvent(elem, type, fn) {
        elem.addEventListener(type, fn)
    }

    var a = document.getElementById('aLink')
    blindEvent(a, 'click', function(e) {
        e.preventDefault() //阻止默认行为
        alert('checked')
    })

IE 低版本浏览器

IE 低版本使用 attachEvent 绑定事件,和 W3C 标准不一样
IE 低版本使用量已经非常少了,很多网站都已经不支持了
建议对 IE 低版本的兼容性了解即可,无需深究
如果遇到对 IE 低版本要求苛刻的面试, 果断放弃

---

• 事件冒泡
  功能需求: 点击下面的每个 P 标签,弹出里面相应的内容

    <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>

    //封装的绑定事件
    function blindEvent(elem, type, fn) {
        elem.addEventListener(type, fn)
    }
    //开始
    var p1 = document.getElementById('p1');
    blindEvent(p1, 'click', function(e) {
        e.stopPropagation(); //阻止冒泡到上层;如果不阻止的话,会先弹出'激活',再弹出'取消',因为在body上也绑定了事件
        alert('激活')
    })

    var body = document.body;
    blindEvent(body, 'click', function(e) {
        alert('取消')
    })
 

---

• 事件代理(事件冒泡的具体应用)
  使用场景: 多个元素上绑定相同的事件
  原理: 利用冒泡机制
  操作:把事件绑定在要绑定元素的父元素上面

<div id="div1">
     <a href="#">a1</a>
     <a href="#">a2</a>
     <a href="#">a3</a>
     <a href="#">a4</a>
<!-- 会随时新增更多的 a 标签 --> 
</div>

   var div1 = document.getElementById('div1');
    div1.addEventListener('click', function(e) {
        var target = e.target; 
     // e.target能告诉你点击(事件)是从哪儿触发的
     //例如在div1 上绑定了一个点击事件,在 a1 上点击,这个时候 target 是a1,而不是 div1
        if (target.nodeName === 'A') {
            alert(target.innerHTML)
        }
    })

---

解题

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

//elem:要绑定元素的父元素; type:事件类型; selector:本来要绑定的元素
function bindEvent(elem,type,selector,fn) {
//如果第四个参数没有,那么第三个参数应该是一个函数,fn 就赋值成 selector
      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')
    bindEvent(div1,'click','a',function(e) {
      e.preventDefault()
      console.log(this.href);
    })

    //不使用代理
    var btn1 = document.getElementById('btn1')
    bindEvent(btn1,'click',function(e) {
      console.log(btn1.innerHTML);
    })
   

2:描述事件冒泡流程

• DOM树形结构
• 事件冒泡
• 阻止冒泡
  事件从最深的节点开始,然后一层一层逐步向上传播开来

3:对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理把事件绑定在要绑定元素的父元素上面