javascript 事件

1. 事件冒泡

   事件沿DOM树向上传播，在每一级节点上都会生，知道传播到document对象。

2. 事件捕获

   在事件捕获过程中，document对象首先接受到click事件，然后沿DOM树依次向下，一直传播到事件的实际目标。

3. DOM事件流

   DOM2级事件，包括三个事件：事件捕获阶段 出于目标阶段 冒泡阶段

事件处理程序

1.onclick()

    this,event 这两个局部变量可以访问document以及该元素本身的成员

2.DOM0级事件处理程序 

1 2 3 4 5

var btn = document.getElementById("myBtn");   btn.onclick=function(){     alert(this.id); }

程序中的this引用的当前的元素的作用域

3.DOM2级事件处理程序

    addEventListener()        //处理的事件名称，作为事件处理的函数，一个bool值 true 在捕获阶段 false 在冒泡阶段

    removeEventListener()    //该函数的参数必须要和绑定事件的参数保持一致

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着素有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定时间相关的信息。

event 公共属性

属性/方法	类型	读/写	说明
bubbles	boolean	只读	表明时间是否冒泡
cancelable	boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理的那个元素
defaultPrevented	boolean	只读	为true表示已经调用preventDefault()
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段:1表示捕获阶段2.表示处理目标3表示冒泡阶段
preventDefault	Function	只读	取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation	Function	只读	取消事件的进一步捕获活冒泡，同事住址任何十几件处理程序被调用
stopPropagation()	Function	只读	取消事件的进一步捕获或者冒泡，如果bubbles为true，则可以使用这个方法。
target	Element	只读	事件的目标
trusted	Boolean	只读	为true表示事件时浏览器生成的：为false表示事件时由开发人员通过JavaScript创建的
type	String	只读	被触发的时间的类型
view	AbstractView	只读	与事件相关联的抽象试图。等同于发生事件的window对象。

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序制定给了目标元素,则this,currentTarget和target包含相同的值，来看一下下面的例子:

1 2 3 4 5

var btn = document.getElementById("myBtn"); btn.onclick  = function(event){     alert(event.currentTarget === this);    //true     alert(event.target === this);            //true }

在需要通过一个函数处理多个事件时，可以使用type属性。

1 2 3 4 5 6 7 8

var btn = document.getElementById("myBtn"); var handler = function(event){     switch(event.type){         case "click":             event.target.style.backgroundColor = "red";        } } btn.onclick = handler;

事件类型

UI        

load    unload    abort error    select  resize  scroll

焦点事件

blur    DOMFocusIn    DOMFocusOut    focus    focusin    focusout

鼠标事件

click dblclick mousedown    mouseenter    mouseleave    mousemove mouseover    mouseup

    1.客户区坐标位置

    事件对象clientX  clientY 表示在视口中的水平坐标和垂直坐标

    2.页面坐标位置

    事件对象pageX    pageY 属。表示在页面中的位置

    3.光标相对于目标元素边界

    offsetX  offsetY

滚轮事件

键盘与文本事件

    keydown keypress keyup textInput

键盘事件

合成事件

变动事件

    删除节点  removeChild replaceChild

    插入节点  appendChild replaceChild insertBefore

变动名称

设备事件

事件委托

    事件委托

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var list = document.getElementById("myLinks"); EventUtil.addHandler(list,"click",function(){     event = EventUtil.getEvent(event);     var target = EventUtil.getTarget(event);     switch(target.id){         case "doSomething":             document.title = "I changed the docuemnt's title"             break;         case "goSomewhere":             localtion.href="http://www.baidu.com";             break;         case "sayHi":             alert("hi");             break;     } });

移除事件处理程序

    

模拟事件

可以在document对象上使用createEvent()方法创建event对象。这个方法接受一个参数

UIEvents	一般化的UI事件。鼠标事件和键盘事件都继承自UI事件。DOM3 UIevent
MouseEvents	一般化的鼠标事件。DOM3 MouseEvent
MutationEvents	一般化的DOM变动事件。DOM3MutationEvent

1.模拟鼠标事件

initMouseEvent()方法用于指定该鼠标事件有关的信息。这个方法接受15个参数

type	表示要触发的事件类型
bubbles	表示事件是否应该冒泡。
cancelable	事件是否可以取消
view	与事件关联的试图
detail	与实践有关的详细信息
screenX	事件相对于屏幕的X坐标
screenY	事件相对于屏幕的Y坐标
clientX	时间相对于视口的X坐标
clientY	事件相对于视口的Y坐标
ctrlkey	表示是否按下Ctrl
altkey	是否按下alt按键
shiftKey	是否按下shift键
metaKey	是否按下meta
button	按下哪个鼠标键
relatedTarget	事件相关的对象。这个参数值在模拟mouseover或mouseout时使用。

2.模拟键盘事件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var textbox = documnet.getElementById("myTextbox");   //创建事件对象 var event = document.createEvent("Events");   //初始化事件对象 event.initEvent(type,bubbles,cancelable); event.view = document.defaultView; event.altKey = false; event.ctrlKey = false; event.ctrlKey = false; event.shiftKey = false; event.metaKey = false; event.keyCode = 65; event.charCode = 65; //触发事件 textbox.dispatchEvent(event);

3.模拟变动事件

1 2 3 4 5

var event = document.createEvent("MutationEvents");   event.initMutationEvent("DOMNodeInserted",true,false,someNode,",","","",0);   target.dispatchEvent(event);

4.模拟HTML事件

1 2 3

var event = document.createEvent("HTMLEvents"); event.initEvent("focus",true,false); target.dispatchEvent(event);

4.自定义DOM事件

1 2 3 4 5 6 7 8 9 10 11 12

var div = document.getElementById("myDiv"),event; EventUil.addHandler(div,"myevent",function(event){     alert("DIV"+event.detail); }) EventUil.addHandler(document,"myevent",function(event){     alert("DOCUMNET:"+event.detail); }) if(document.implementation.hasFeature("CustomEvents","3.0")){     event = document.createEvent("CustomEvent");     event.initCustomEvent("myevent",true,false,"Hello world");     div.disppatchEvent(event); }

1 2 3 4 5 6 7 8 9 10

var btn = document.getElementById("myBtn");   //创建事件对象 var event = document.createEvent("MouseEvents");   //初始化事件对象 event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);   //触发事件 btn.dispatchEvent(event);