事件

1. Event 对象

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

4. 事件委托

1. 定义

事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件

2. 基本实现

js 原生实现事件委托

1. 需求给li添加同样效果的事件


        
     111
	
     222
	
     p标签
	
     333
	
     444
    
# 传统（首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li）var oUl = document.getElementById('ul')var aLi = oUl.getElementsByTagName('li')for(var i=0; i

2. 需求每个li被点击的效果都不一样


        
         
         
         
     
    
var box = document.getElementById('box')box.onclick = function(ev) {    var ev = ev || window.event    var target = ev.target || ev.srcElement    switch(target.id) {        case 'add' :             console.log('添加')            break        case 'remove' :            console.log('删除')            break        case 'move' :            console.log('移动')            break        case 'select' :            console.log('选择')            break    }}复制代码

3. 需求动态添加事件


        
     111
	
     222
	
     p标签
	
     333
	
     444
    
var oUl = document.getElementById('ul')oUl.onmouseover = function (ev) {    var ev = ev || window.event    var target = ev.target || ev.srcElement    if(target.nodeName.toLowerCase() == 'li') {        target.style.background = 'red'    }}oUl.onmouseout = function (ev) {    var ev = ev || window.event    var target = ev.target || ev.srcElement    if(target.nodeName.toLowerCase() == 'li') {        target.style.background = 'white'    }}var num = 4function addNode() {    num++    var li = document.createElement('li')    li.innerHTML = num * 111    oUl.appendChild(li)}复制代码

4. 需求无论事件第一事件源是谁，最后都统一到li才执行（统一事件源）


        
         11111111111
    
    
             
      
               22222222    
      
    
    
             3333333333    
    
     4444444
    
var oUl = document.getElementById('test');oUl.addEventListener('click',function(ev){    var target = ev.target;    while(target != oUl) {        if(target.tagName.toLowerCase() == 'li') {            console.log('li')            break        }        target = target.parentNode    }})复制代码

3. 什么事件可以用事件委托

适合用事件委托的事件：click、mousedown、mouseup、keydown、keyup、keypress

不适合的：mousemove、mouseout（这两种有事件冒泡，但是经常需要计算它们的位置，处理起来不太容易）focus、blur（这类没有事件冒泡的）

5. 事件流

1. 事件冒泡

1.定义：

一个事件触发后，会在子元素和父元素之间传播。这种传播分为三个阶段。

事件传播分成三个阶段：

捕获阶段：从window 对象传导到目标节点（上层传到底层）称为捕获阶段（capture phase），捕获阶段不会响应任何事件

目标阶段：在目标节点上触发，称为目标阶段

冒泡阶段：从目标节点传导回window 对象（从底层传回上层），称为冒泡阶段。事件代理既是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

2. 阻止事件冒泡方法

event.stopPropagation() 阻止事件冒泡

return false 阻止事件冒泡和默认行为

event.preventDefault() 阻止默认行为

6. 浏览器在事件处理程序上的5种形式

1. HTML 事件处理程序

  复制代码

2. DOM0 级事件处理程序

var btn = document.getElementById("btn");//指定事件处理程序btn.onclick = function(){   alert("Clicked"); };//想要取消事件处理程序的话，只需将事件处理程序属性设为null即可btn.onclick = null;btn.onclick=function(){  alert(this.id);//btn}复制代码

3. DOM2 级事件处理程序

指定和取消的参数必须完全相同才有效，为了能够取消，最好函数采用命名函数

var handler = function(){   alert("clicked"); };//添加事件处理程序btn.addEventListener("click",handler,false);//取消事件处理程序btn.removeEventListener("click",handler,false);//有效//取消事件处理程序btn.removeEventListener("click",a,false);//无效复制代码

onclick 和addEventListener 的区别：

box.onclick = function(){ console.log('1') }box.onclick = function(){ console.log('2') }   //会覆盖1box.addEventListener('click',function(){ console.log('1') })box.addEventListener('click',function(){ console.log('2') })  //不会覆盖复制代码

4. IE 事件处理程序

let box = document.querySelector('.box')function xxx(){console.log('box clicked...')}box.attachEvent('onclick',xxx)复制代码

5. 跨浏览器的事件处理程序（兼容）

var EventUtil = {  addHandler:function(element,type,handler){    if(element.addEventListener){      element.addEventListener(type,handler,false);    }else if(element.attachEvent){      element.attachEvent("on"+type,handler);    }else{      element["on"+type] = handler;    }  },  removeHandler:function(element,type,handler){    if(element.removeEventListener){      element.removeEventListener(type,handler,false);    }else if(element.detachEvent){      element.detachEvent("on"+type,handler);    }else{      element["on"+type] = null;    }  }};var handler = function(){  alert("Clicked");};//指定EventUtil.addHandler(btn,"click",handler);//移除事件处理程序EventUtil.removeHandler(btn,"click",handler);复制代码

事件