JS事件流与事件处理程序实例分析
本文实例讲述了JS事件流与事件处理程序。分享给大家供大家参考,具体如下:
1.事件流:从页面中接收事件的顺序
1.1IE:事件冒泡流
1.2Netscape:事件捕获
1.3DOM事件流:事件捕获阶段——事件目标阶段——事件冒泡阶段
DOM2级事件规定:捕获阶段不会涉及目标事件。
2.事件处理程序
事件:用户或者浏览器自身执行的某种动作
事件处理程序:响应某个事件的函数。
2.1HTML事件处理程序
用一个与该事件处理程序同名的HTML特性来指定。
2.1.1包含要执行的具体动作
2.1.2调用其他地方定义的脚本
2.1.3缺点
- 1.时差问题:使用try-catch块捕捉错误。onclick="try{showMessage();}catch(ex){}"
- 2.程序的作用域链在不同浏览器中会导致不同结果
- 3.HTML和JS代码耦合紧密
2.2DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性,例如:onclick。
为事件处理程序赋值。
btn.onclick=function(){ alert(this.id); };
事件处理程序在元素的作用域中运行,this指向当前元素。
删除事件处理程序:
btn.onclick=null;
2.3DOM2级事件处理程序
addEventListener(处理的事件名,事件处理程序函数,布尔值);
removeEventListener(处理的事件名,事件处理程序函数,布尔值);
布尔值:捕获阶段调用事件处理程序:true。冒泡阶段调用:false。大多数情况下用false。
btn.addEventListener("click",function(){ alert(this.id); },false);
好处:可以添加多个事件处理程序。事件按照添加先后顺序执行。
问题:匿名函数无法移除。
最好写成
varhandler=function(){ alert(this.id); }; btn.addEventListener("click",handler,false); btn.removeEventListener("click",handler,false);
2.4IE事件处理程序
attachEvent(事件处理程序名称,事件处理程序函数);
detachEvent(事件处理程序名称,事件处理程序函数);
通过该方法添加的事件处理程序,都会被添加到冒泡阶段。
btn.attachEvent("onclick",function(){ alert("clicked"); });
注意:使用DOM级方法时,事件会在所属元素的作用域内运行;使用attachEvent()方法,事件处理程序会在全局作用域运行,this==window。
好处:可以添加多个事件处理程序。后添加先执行。
问题:匿名函数无法移除。
varhandler=function(){ alert(this.id); }; btn.attachEvent("onclick",handler); btn.detachEvent("onclick",handler);
2.5跨浏览器事件处理程序
- 1.创建一个方法addHandler():区分使用哪种方法来添加事件;
- 2.创建一个对象EventUtil。拥有两个方法。
- 3.addHandler(要操作的元素,事件名称,事件处理函数)。
- 4.removeHandler(要操作的元素,事件名称,事件处理函数)。
varEventUtil={ addHandler:function(element,type,handler){ if(element.addEventLister){ element.addEventListener(type,handler,false); }elseif(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element.["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.addEventLister){ element.removeEventListener(type,handler,false); }elseif(element.attachEvent){ element.detachEvent("on"+type,handler); }else{ element.["on"+type]=null; } } };
使用:
EventUtil.addHandler(btn,"click",handler); EventUtil.removeHandler(btn,"click",handler);
PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:
javascript事件与功能说明大全:
http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。