前端JS基础八（事件）

事件

• 通用事件绑定

  var btn=document.getElementById(‘btn1’); 
  btn.addEventListener(‘click’,function(event){   //JS事件绑定
    console.log(‘clicked’) 
  })

   //由于addEventListener太长了 我们自己写一个事件绑定函数
  function bindEvent(elem,type,fn){  
    elem.addEventListener(type,fn) 
  }

  var a=document.getElementById(‘link1’) 
  bindEvent(a,’click’,function(e){  //事件绑定函数的使用
    e.preventDefault()  //阻止默认行为 
    alert(‘clicked’) 
  })

注：关于IE低版本的兼容性 
IE低版本使用attachEvent绑定事件，和W3C标准不一样

事件冒泡

在父级 div 中定义的事件，会在子级的事件执行之后冒泡上来执行

• 阻止事件冒泡 e.stopPropagation()

  
  
    
      
      
    
    
      

        
激活
        
取消
        
取消
        
取消
      
      

        
取消
        
取消
      
  
      
    
  

• 代理

  
  
    
      
      
    
    
      

        
激活
        
取消
      
      

        
取消
        
取消
      
  
      
    
  

练习题

练习题1、编写一个通用的事件监听函数 
  看上面的bindEvent函数

练习题2、描述事件冒泡流程 
  1、DOM树形结构 
  2、事件冒泡 
  3、阻止冒泡 
  4、冒泡的应用(代理) 

练习题3、对于一个无线下拉加载图片的页面，如何给每个图片绑定事件 
  1、使用代理 
  2、知道代理的两个优点 
    （1）代码简洁 
    （2）减少浏览器内存占用