JavaScript常见事件处理程序实例总结
本文实例总结了JavaScript常见事件处理程序。分享给大家供大家参考,具体如下:
事件指的是使用者或者浏览器自身执行的某种动作(比如点击事件)。响应这些事件的函数就叫做事件处理程序(或者叫事件监听器)。事件处理程序的名字以“on”为前缀,比如click事件的事件处理程序就是onclick。
1HTML事件处理程序
如果某个元素支持某个事件,那么它都有一个与相应的事件处理程序同名的HTML属性,我们可以通过这个属性来指定JS:
因为这里的脚本是嵌入在HTML元素的属性中,所以使用了单引号!
也可以调用在页面的其他地方定义的脚本:
functionshowMessage(){ console.log("HelloWorld!"); }
事件处理程序的代码在执行时,可以访问到全局作用域中的任何代码!
这样指定的事件处理程序,会创建一个封装着元素属性值的函数,它有一个局部变量event,就是事件对象:
通过event变量,可以直接访问事件对象。在这个函数内部,this值等于事件的目标元素:
可以通过这个动态创建的函数,来扩展它的作用域。在这个函数内部,可以访问document以及该元素本身的成员,这个函数是像这样使用with来扩展作用域的:
function(){ with(document){ with(this){ //元素属性值 } } }
所以,在事件处理程序中,要访问自己的属性就变得很容易啦O(∩_∩)O~:
如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素(父元素)的入口,所以这个函数应该是这样的:
function(){ with(document){ with(this.form){ with(this){ //元素属性值 } } } }
这样事件处理程序就无需引用表单元素,就可以直接访问到表单中的其他字段啦O(∩_∩)O~:
在HTML中直接指定事件处理程序会有这些缺点:
- 时差问题——假设函数是定义在页面最底部,如果用户在页面还未解析到这个函数时,就点击了按钮,就会引发错误。所以很多HTML事件处理程序都会被封装在try-catch块中:
- 扩展事件处理程序的作用域链,在不同的浏览器中结果可能会不同。
- HTML与JavaScript代码紧密耦合。要修改事件处理程序,就需要修改两个地方,所以很多开发人员转而使用JavaScript来指定事件处理程序。
2DOM0级事件处理程序
它是通过将一个函数赋值给事件处理程序的属性,来指定事件处理程序的。要使用这种方法,必须先取得一个要操作的对象的引用。
每个元素(包括window和document)都有自己的事件处理程序属性,它们通常是小写,比如onclick。将属性的值设置为函数,就指定了事件处理程序。
DOM0级事件处理程序是元素的方法,它是在元素的作用域内运行的,因此程序中的this引用的是当前元素:
点我 varbtn=document.getElementById("myBtn"); btn.onclick=function(){ console.log(this.id);//myBtn }
可以通过this访问元素的任何属性和方法。DOM0级事件处理程序会在事件流的冒泡阶段被处理。
也可以像这样删除这样指定的事件处理程序:
btn.onclick=null;//删除指定的事件处理程序
注意:如果使用的是HTML指定的事件处理程序,那么onclick属性的值就是一个包含着在同名HTML特性中指定的代码函数。将相应的属性设置为null,也可以删除以这种方式指定的事件处理程序。
3DOM2级事件处理程序
- addEventListener():指定事件处理程序。
- removeEventListener():删除事件处理程序。
所有的DOM节点都包含这两个方法。它们都接受3个参数:要处理的事件名、事件处理程序函数、布尔值。最后一个参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
DOM2级事件处理程序可以很方便地添加多个事件处理程序:
varbtn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ console.log(this.id); },false); btn.addEventListener("click",function(){ console.log("Helloworld!"); },false);
这些事件处理程序会按照添加它们的顺序依序触发。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()移除!移除时传入的参数必须与添加时的参数相同。这也就意味着通过addEventListener()添加的匿名函数将无法被移除:
varhandler=function(){ console.log("Hideniro"); }; btn.addEventListener("click",handler,false); btn.removeEventListener("click",handler,false);//移除成功
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容浏览器。所以如果不是特别需要,请不要在事件捕获阶段注册事件处理程序。
注意:IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序。
4IE事件处理程序
IE实现了与DOM类似的方法:attachEvent()和detachEvent()。它们接受两个参数:事件处理程序名称和事件处理程序函数。因为IE8及早期版本只支持事件冒泡,所以使用attachEvent()添加的事件处理程序会被添加到冒泡阶段。
这样为按钮添加一个事件处理程序:
varbtn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ });
IE的attachEvent()与DOM0级方法的区别是事件处理程序的作用域不同。DOM0级方法中,事件处理程序会在其所属元素的作用域内运行;而使用attachEvent(),事件处理程序会在全局作用域中运行,所以this等于window:
varbtn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ console.log("Clicked"); console.log(this===window);//true;this为全局作用域 });
也可以为一个元素添加多个事件处理程序:
varbtn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ console.log("Clicked"); console.log(this===window);//true;this为全局作用域 }); //IE10中多个事件是按照事件定义的顺序执行 btn.attachEvent("onclick",function(){ console.log("Helloworld!"); });
IE8及之前的版本,是以添加它们的相反顺序进行,IE9修复了这个问题。
可以通过detachEvent()来移除添加的事件处理程序,但必须提供相同的参数。所以它也不能移除之前通过匿名函数添加的事件处理程序。只要能够将对相同函数的引用作为参数,就可以移除添加的事件处理程序咯:
点我 varbtn=document.getElementById("myBtn"); varhandler=function(){ console.log("Clicked"); } btn.attachEvent("onclick",handler); btn.detachEvent("onclick",handler);
注意:IE和Opera支持IE事件处理程序。
5跨浏览器的事件处理程序
只要恰当地运用能力检测,就能写出跨浏览器的事件处理程序。
varEventUtil={ /** *添加事件 *@paramelement要操作的元素 *@paramtype事件名称 *@paramhandler事件处理函数 */ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }elseif(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, /** *移除事件 *@paramelement要操作的元素 *@paramtype事件名称 *@paramhandler事件处理函数 */ removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }elseif(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } }
这样使用:
点我 varbtn=document.getElementById("myBtn"); varhandler=function(){ console.log("Clicked"); } EventUtil.addHandler(btn,"click",handler); EventUtil.removeHandler(btn,"click",handler);
还有一点,DOM0级对每一个事件只支持一个事件处理程序,好在现在只支持DOM0级事件处理程序的浏览器几乎已经没有咯,所以不用担心啦O(∩_∩)O~
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。