JavaScript基础知识——事件

QA:

　　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、描述事件冒泡的过程

　　3、对于一个无限下拉加载图片的页面,如何给每个图片绑定事件

知识点：

　　1、通用事件绑定

//标准方法
 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绑定事件用attachEvent

　　2、事件冒泡

<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>
//根据以上代码，点击每一个p标签，弹出里面的响应的内容

//封装的绑定事件
    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)
        }
    })