打好基础，查漏补缺

基础是重中之重

绑定事件

    // 1 on + type ,有良好的兼容性，但一个onxxxx事件只能绑定一个函数
    // 与写在Html元素中基本等同
    ele.onxxxx = function(e){
    console.log(e)
    ]
    
    // 2 IE9 以下不兼容，能给同一个对象的同一个事件绑定多个处理函数，多次绑定同一个函数只执行一次。
    
    ele.addEventListener('type', function(e){
        console.log('a')
    },false)
    
      ele.addEventListener('type', function(e){
        console.log('b')
    },false)
    
    // 3 ie9独有，同一个对象的同一个事件绑定多个处理函数，多次绑定同一个函数也能执行多次
    ele.attachEvent('on' + type,function(){
        console.log('aaaa')
    })

事件函数中的处理环境，即this指向问题

句柄方式 this指向的是元素本身

addEventListenerthis指向元素本身

attachEvent this指向 windows

    ele.attachEvent('onclick',function(){
        test.call(ele)
    })

    function test(){
        console.log(this)   
    }

解除事件绑定

//1
ele.onxxxx = null

// 2
ele.removeEventListent('type',handler,false)

// 3 

ele.detachEvent('on' + type, handler)

事件处理模型（事件冒泡、捕获和委托）

事件冒泡：结构上（非视觉）嵌套关系的元素，会存在事件冒泡的功能，同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：结构上（非视觉）嵌套关系的元素，会存在事件捕获的功能，同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）

IE没有事件捕获：

触发顺序：先捕获后冒泡

同一对象同一事件绑定两个函数，一个冒泡一个捕获。会先执行捕获，到源元素后会根据源元素绑定函数顺序执行：，然后再冒泡

还有一种不是事件处理模型中的捕获，是元素堆全局事件的一种捕捉 div.setCapture() div.releaseCapture

阻止事件冒泡

1、 event.stopropagation()

2、IE 独有。event.cancelBubble = true

    stopBubble(e){
       if (e.stopropagation){
           e.stopropagation()
       } else {
           e.cancelBubble = true
       }
    }

阻止默认事件

// 以对象属性方式绑定的事件  return false
  ele.oncontextmenu = function(e){
      console.log('a')
      return false  // 禁用右键菜单事件
  }
  
 // W3C标准  e.preventDefault
  ele.oncontextmenu = function(e){
      console.log('a')
      e.preventDefault()
  }
  
  // 兼容IE9及以下 returnValue = false
  
  ele.oncontextmenu = function(e){
      console.log('a')
      e.returnValue = false
  }
    // 兼容性写法
    
    function cancelHandler(e){
        if (e.preventDefault){
            e.preventDefault()
        } else {
            e.returnValue = false
        }
    }

事件对象

事件对象：：e || window.event

事件对象上有个属性是事件源对象： e.target || e.srcElement

事件委托

利用事件冒泡和事件源对象进行处理

ul.onclick = function(e){
  var event =   e || window.event
    var target = e.target || e。srcElement
    console.log(targrt.innerText)
}

事件类型

怎么区分鼠标左右键

只能在 mousedown和mouseup中通过e.button 来判断 0|1|2

怎么解决mousedown和click的冲突

一个down和up不论间隔多少事件都算一个click，所以在mouseup中通过点击时长判断

键盘事件

keydown 除fn之外所有的键盘

keypress 字符类键盘，并返回相应ASCII码。String.fromCharCode(e.charCode)

文本操作事件

input， change ，focus，blur

窗体操作类事件

window.onscroll window.pageXOffset 滚动条距离

window.onload

javaScript基础（15）：(事件)