浅谈Javascript事件处理程序的几种方式
2024-05-06 14:21:40
供稿：网友
事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover，都是事件的名字。而相应某个事件的函数就叫事件处理程序（或事件侦听器）。为事件指定处理程序的方式有好几种。
一：HTML事件处理程序。
如:
代码如下:
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>
相信这种方式是目前咱们大家用得比较多的一种，但是在html中指定事件处理程序有两个缺点。
(1)首先：存在一个时差问题。就本例子来说,假设show()函数是在按钮下方，页面的最底部定义的，如果用户在页面解析show()函数之前就单击了按钮，就会引发错误；
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。
因此，许多开发人员摒弃html事件处理程序，转而使用javascript指定事件处理程序。
二：Javascript指定事件处理程序
javascript指定事件处理程序包括三种方式：
(1):DOM0级事件处理程序
如：
代码如下:
var btn=document.getElementById("mybtn"); //取得该按钮的引用
btn.onclick=function(){
alert('clicked');
alert(this.id); // mybtn
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序：
btn.onclick=null; // 删除事件处理程序
}
(2):DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名，做为事件处理程序的函数和一个布尔值。最后这个参数如果是true,表示在捕获阶段调用事件处理程序；如果是fasle,表示在冒泡阶段调用事件处理程序。
如：
代码如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。
如：
代码如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
},false);
这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照它们的顺序触发。
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
如：
代码如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
