js第13章事件

1.事件流

事件流：从页面中接受事件的顺序 ；ie事件流指的是是事件冒泡 netscape指的是事件事件捕获；

事件冒泡
div添加点击事件， 点击div会冒泡到 body,再冒泡的html,最后再冒泡到document对象
事件捕获
div添加点击事件，会从document对象开始捕获，再到html,再到body最后到div
DOM事件流
Dom2事件规定了事件流分为事件捕获，目标阶段，事件冒泡

• 事件捕获： document->html->body
• 目标阶段：div
• 事件冒泡：body->html->document

2.事件处理程序

响应时间的函数
html事件处理程序

<div onclick="show()"></div>

DOM0级事件处理程序

 var btn=document.getelementById("btn");
 btn.onclick=function(){
    this.id this指向当前元素
 }

事件清除

bn.onclick=null

DOM2级事件处理程序
addEventListen() 可以添加多个事件 顺序按照程序先后顺序

• 参数1 事件类型 没有on
• 参数2 响应事件的函数
• 参数3 true/false true表示捕获阶段调用函数 fasle表示在冒泡阶段处理函数

removeEventListen()事件移除

• 必须和事件监听参数一致才有效
• 匿名函数不能移除事件

IE事件处理程序
attachEvent() 可以执行多个事件处理 顺序和代码顺序相反

• 参数1 事件类型 on
• 参数2 响应事件的函数

 btn.attchEvent("onclick",function(){
 this   在全局作用域中运行 指向wIndow对象
})

detachEvent()
移除事件处理程序，参数和监听参数一致，才有效

跨浏览器事件处理程序

var eventuil={
  addHandle:function( ele,type,handle){
     if(ele.addEventListener)
     {
        ele.addEventListener(type,handle,false)
     } 
     else if(ele.attachEvent)
     {
       ele.attachEvent("on"+type,handle)
     }
     else{
      ele["on"+type]=handle
     }
     
  }
  removeHandle:function(ele,type,handle)
  { if(ele.removeEventListener)
  {
     ele.removeEventListener(type,handle,false)
  }
  else if(ele.detachEvent)
  {
    ele.detachEvent("on"+type,handle)
  }
  else{
  ele["on"+type]=null;
  }
  }
}

3.事件对象

触发DOM事件，会产生一个事件对象event,包含着事件有关的所有信息；
DOM中的事件对象

• DOM0,DOM2级通过向函数传递event
• html事件处理 通过event变量保存event对象
• 事件处理程序中 this始终指向currentTarget 指的是添加事件的元素
• 不一定指向target 指的是实际的目标元素比如事件处理程序 写在父级中

  document.body.onclick=function(event){
     this 指向currentTarget body
     event.target==document.getelementById("btn"); 
}

• type属性 事件的类型
• preventDefault（） 阻止事件的默认行为比如a链接默认行为是点击跳转，如果使用阻止事件默认行为，则不会跳转
• stopPropagation()阻止事件冒泡

  div.onclick=function(){
      alert("hello")
  }
  document.body.onclick=function(){
  alert("wrold")
}
如果没有阻止事件冒泡，则先会弹出hello，再会弹出world 给div阻止事件冒泡，则只会弹出hello

• eventPhase 属性返回事件处于哪个阶段 1 捕获阶段 2 目标阶段 3冒泡阶段

IE中的事件对象

• DOM0级事件处理程序 事件对象 event作为window对象的一个属性 window.event

• attachEvent处理程序 事件对象 通过函数传递参数event

1. cancelBubble属性 默认false 设置为true阻止事件冒泡
2. returnvalue 默认true 设置false阻止事件的默认行为
3. srcElement事件的目标与DOM事件中的target相同
4. type属性 事件的类型

跨浏览器的事件对象

var  eventil={
addHandle:function( ele,type,handle){}
getevent:function(event){
  return event？event：window.event
}
preventDefault:function(event){
   if( event.preventDefault)
   {   event.preventDefault()
   }
   else{
    event.returnvalue=false;
   }
}

}

btn.onclick=function(event){
var e= eventil.getevent(event);
eventil.preventDefault(e)
}

4.事件类型

1.load事件

• 页面加载完毕时（html ,css js文件）会触发window上面的load事件
• 图像上面也能触发该事件

 window.addEventLitener("load",function(event)
  {
    alert("页面加载完毕")
    var img=document.createElement("img");
     img.addEventListener("load",function(){
     alert("图片加载完毕")
     },fasle)
  document.body.appendchild(img);
  img.src=""
  },false)

2.unload事件
页面卸载的时候触发window.onload (最多被用于清除引用，避免内存泄露)
3.resize事件
当浏览器窗口发生变化的时候
4.scroll window对象上的
实际表示页面元素发生变化
5.焦点事件

• focus 获得焦点
• blur:失去焦点

6.鼠标事件

• click点击
• dbclick双击
• mousedown 按下鼠标
• mouseup 抬起鼠标
• mouseeenter 鼠标进入元素
• mouseleave 鼠标离开元素
• mousemove鼠标在元素内移动
• mouseout位于一个元素的上方，然后移入另一个元素
• mouseover 位于元素外部，用户将首次移入另一个元素边界

mousedown mouseup click mousedown mouseup click dbclick

客户区坐标位置 clientXclientY
页面位置 pageX pageY
屏幕坐标位置 screenX screenY

7.键盘与文本事件

• keydown 按下任意键
• keyup 键盘抬起
• keypress 按下字符键
  键码keycode
  textInput() 只有可编辑区域才能触发

8.触摸事件

• touchstart 手指在屏幕上刚开始触摸
• touchmove 在屏幕滑动的时候
• touchend 手指从屏幕移开的
  touchstart touchmove 都有touches属性表示触摸操作的对象数组
  targetTouches
  changedTouches

5.内存与性能

事件委托：利用事件冒泡的原理；
如果很多元素需要添加事件，可以给父元素添加事件；