JavaScript高级程序设计读书笔记--事件

来源：互联网发布：pdf转换mobi软件编辑：程序博客网时间：2024/05/07 01:59

事件流

描述从页面中接受事件的顺序；IE事件冒泡流，其他事件捕获流。

事件处理程序

响应某个事件的函数-事件处理程序（事件侦听器）

html事件处理程序

<form action="">    <input type="text" name="username" value=""/>    <input type="button" onclick="alert(username.value)" /></form><input type="button" onclick="try{show();}catch(ex){}" />

DOM0级事件处理程序（元素的方法，this指向该元素）事件流的冒泡阶段被处理。
- 元素的方法，this指向该元素，事件流的冒泡阶段被处理。

ali.onclick = function(){    alert(this.id)};ali.onclick = null; //删除事件处理程序

DOM2级事件处理程序
- DOM2级事件处理程序（addEventListener()，removeEventListener()）所属元素作用域内参数三个：处理事件名，作为事件处理的函数，布尔（true->捕获，flase->冒泡）。
- 可以添加多个事件处理程序。
- 只能用removeEventListener()，移除时传入的参数需与添加是相同。
- 一般将事件处理程序添加在冒泡阶段，兼容更多的浏览器。
IE的事件处理程序。
- attachEvent()，detachEvent()接受相同的两个参数，事件处理名称与事件处理程序函数。冒泡阶段，全局作用内运行。
- 可添加多个事件处理程序，相反顺序触发。

oUl.attachEvent("onclick",function(){    alert(this == window);});

跨浏览器的事件处理程序

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;        }    }}

事件对象

event对象包含所有与事件相关的信息。所有浏览器都支持它。

DOM中的事件对象
- event.type 被触发的事件类型
- 在事件处理程序内部对象this == currentTarget == target
- 通过一个函数处理多个事件，可以使用type
- 阻止事件默认行为，preventDefault()，前提，cancelable的属性为true。 stopPropagation()用于立即停止事件在DOM层次中的传播，即取消事件的捕获或者冒泡。前提，bubbles为true。
- eventPhase属性，确定事件流当前处于哪个解阶段。

document.body.onclick = function(event){    alert(event.currentTarget == document.body);    alert(this == document.body);    alert(event.target == document.body);//false    alert(event.target == oUl);//true}

ali[0].onclick = function(event){    alert(event.eventPhase);};//2oUl.addEventListener("click",function(event){    alert(event.eventPhase);},true);//1oUl.onclick = function(event){    alert(event.eventPhase);};//3当eventPhase等于2的时候，target，currentTarget，this相等

IE中的事件对象

访问IE中event有几种不同的方式，取决于指定事件处理程序的方法。

事件处理方法访问IE中event对象的方式 DOM0级方法 window对象的一个属性：window.event DOM2级方法 1.event对象通过参数被传入事件处理函数 btn.attachEvent(“click”,function(event){})；2.通过window.event HTML特性通过event变量来访问event对象

IE中事件对象与DOM中的事件对象的不同

特性 DOM IE 取消默认行为 event.preventDefault() returnValue =false 是否取消事件的默认行为 cancelable \ 是否可使用取消事件冒泡或捕获 bubbles \ 取消事件捕获或冒泡，同时阻止任何事件处理程序被调用 event.stopProtagation() cancelBubble = true，只能取消冒泡事件的目标 target srcElement

跨浏览器的事件对象

var EventUtil = {    getEvent:function(event){        return event ? event : window.event;    },    getTarget:function(event){        return event.target || event.srcElement;    },    preventDefault:function(event){        if(event.preventDefault){            event.preventDefault();        }else{            event.returnValue = false;        }    },    stopPropagation:function(event){        if(event.stopPropagation){            event.stopPropagation();        }else{            event.cancelBubble = true;        }    },    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;        }    }};a1.onclick = function(event){    event = EventUtil.getEvent();    EventUtil.preventDefault(event);};

0 0