JavaScript常见事件处理程序实例总结

本文实例总结了javascript常见事件处理程序。分享给大家供大家参考，具体如下：

事件指的是使用者或者浏览器自身执行的某种动作（比如点击事件）。响应这些事件的函数就叫做事件处理程序（或者叫事件监听器）。事件处理程序的名字以“on”为前缀，比如 click 事件的事件处理程序就是 onclick。

1 html 事件处理程序

如果某个元素支持某个事件，那么它都有一个与相应的事件处理程序同名的 html 属性，我们可以通过这个属性来指定 js：

<input type="button" value="点我" onclick="alert('点击过咯')"/>

因为这里的脚本是嵌入在 html 元素的属性中，所以使用了单引号！

也可以调用在页面的其他地方定义的脚本：

<input type="button" value="click me" onclick="showmessage()">
<script type="text/javascript">
  function showmessage() {
    console.log("hello world!");
  }
</script>

事件处理程序的代码在执行时，可以访问到全局作用域中的任何代码！

这样指定的事件处理程序，会创建一个封装着元素属性值的函数，它有一个局部变量 event，就是事件对象：

<input type="button" value="点我" onclick="alert(event.type)"/>

通过 event 变量，可以直接访问事件对象。在这个函数内部，this 值等于事件的目标元素：

<input type="button" value="点我" onclick="alert(this.value)"/>

可以通过这个动态创建的函数，来扩展它的作用域。在这个函数内部，可以访问 document 以及该元素本身的成员，这个函数是像这样使用 with 来扩展作用域的：

function(){
  with(document){
    with(this){
      //元素属性值
    }
  }
}

所以，在事件处理程序中，要访问自己的属性就变得很容易啦 o(∩_∩)o~：

<!-- 输出 “点我” -->
<input type="button" value="点我" onclick="alert(value)"/>

如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，所以这个函数应该是这样的：

function(){
  with(document){
    with(this.form){
       with(this){
        //元素属性值
       }
    }
  }
}

这样事件处理程序就无需引用表单元素，就可以直接访问到表单中的其他字段啦o(∩_∩)o~：

<form method="post">
  <input type="text" name="username" value="">
  <input type="button" value="echo usernmame" onclick="console.log(username.value);">
</form>

在 html 中直接指定事件处理程序会有这些缺点：

• 时差问题——假设函数是定义在页面最底部，如果用户在页面还未解析到这个函数时，就点击了按钮，就会引发错误。所以很多 html 事件处理程序都会被封装在 try-catch 块中：

<input type="button" value="点我" onclick="try{alert(value);} catch(ex){}"/>

• 扩展事件处理程序的作用域链，在不同的浏览器中结果可能会不同。
• html 与 javascript 代码紧密耦合。要修改事件处理程序，就需要修改两个地方，所以很多开发人员转而使用 javascript 来指定事件处理程序。

2 dom0 级事件处理程序

它是通过将一个函数赋值给事件处理程序的属性，来指定事件处理程序的。要使用这种方法，必须先取得一个要操作的对象的引用。

每个元素（包括 window 和 document） 都有自己的事件处理程序属性，它们通常是小写，比如 onclick。将属性的值设置为函数，就指定了事件处理程序。

dom0 级事件处理程序是元素的方法，它是在元素的作用域内运行的，因此程序中的 this 引用的是当前元素：

<button id="mybtn">点我</button>
<script type="text/javascript">
  var btn = document.getelementbyid("mybtn");
  btn.onclick = function () {
    console.log(this.id);//mybtn
  }
</script>

可以通过 this 访问元素的任何属性和方法。dom0 级事件处理程序会在事件流的冒泡阶段被处理。

也可以像这样删除这样指定的事件处理程序：

btn.onclick = null; //删除指定的事件处理程序

注意： 如果使用的是 html 指定的事件处理程序，那么 onclick 属性的值就是一个包含着在同名 html 特性中指定的代码函数。将相应的属性设置为 null，也可以删除以这种方式指定的事件处理程序。

3 dom2 级事件处理程序

• addeventlistener()：指定事件处理程序。
• removeeventlistener()：删除事件处理程序。

所有的 dom 节点都包含这两个方法。它们都接受 3 个参数：要处理的事件名、事件处理程序函数、布尔值。最后一个参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

dom2 级事件处理程序可以很方便地添加多个事件处理程序：

var btn = document.getelementbyid("mybtn");
btn.addeventlistener("click", function () {
  console.log(this.id);
}, false);
btn.addeventlistener("click", function () {
  console.log("hello world!");
}, false);

这些事件处理程序会按照添加它们的顺序依序触发。

通过 addeventlistener() 添加的事件处理程序只能使用 removeeventlistener() 移除！移除时传入的参数必须与添加时的参数相同。这也就意味着通过 addeventlistener() 添加的匿名函数将无法被移除：

var handler = function () {
  console.log("hi deniro");
};
btn.addeventlistener("click", handler, false);
btn.removeeventlistener("click", handler, false);//移除成功

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容浏览器。所以如果不是特别需要，请不要在事件捕获阶段注册事件处理程序。

注意： ie9、firefox、safari、chrome 和 opera 支持 dom2 级事件处理程序。

4 ie 事件处理程序

ie 实现了与 dom 类似的方法：attachevent() 和 detachevent()。它们接受两个参数：事件处理程序名称和事件处理程序函数。因为 ie8 及早期版本只支持事件冒泡，所以使用 attachevent() 添加的事件处理程序会被添加到冒泡阶段。

这样为按钮添加一个事件处理程序：

var btn = document.getelementbyid("mybtn");
  btn.attachevent("onclick", function () {
});

ie 的 attachevent() 与 dom0 级方法的区别是事件处理程序的作用域不同。 dom0 级方法中，事件处理程序会在其所属元素的作用域内运行；而使用 attachevent() ，事件处理程序会在全局作用域中运行，所以 this 等于 window：

var btn = document.getelementbyid("mybtn");
btn.attachevent("onclick", function () {
  console.log("clicked");
  console.log(this === window);//true;this 为全局作用域
});

也可以为一个元素添加多个事件处理程序：

var btn = document.getelementbyid("mybtn");
btn.attachevent("onclick", function () {
  console.log("clicked");
  console.log(this === window);//true;this 为全局作用域
});
//ie10 中多个事件是按照事件定义的顺序执行
btn.attachevent("onclick", function () {
  console.log("hello world!");
});

ie8 及之前的版本，是以添加它们的相反顺序进行，ie9 修复了这个问题。

可以通过 detachevent() 来移除添加的事件处理程序，但必须提供相同的参数。所以它也不能移除之前通过匿名函数添加的事件处理程序。只要能够将对相同函数的引用作为参数，就可以移除添加的事件处理程序咯：

<button id="mybtn">点我</button>
<script type="text/javascript">
  var btn = document.getelementbyid("mybtn");
  var handler = function () {
    console.log("clicked");
  }
  btn.attachevent("onclick", handler);
  btn.detachevent("onclick", handler);
</script>

注意： ie 和 opera 支持 ie 事件处理程序。

5 跨浏览器的事件处理程序

只要恰当地运用能力检测，就能写出跨浏览器的事件处理程序。

var eventutil = {
  /**
   * 添加事件
   * @param element 要操作的元素
   * @param type 事件名称
   * @param handler 事件处理函数
   */
  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;
    }
  },
  /**
   * 移除事件
   * @param element 要操作的元素
   * @param type 事件名称
   * @param 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;
    }
  }
}

这样使用：

<button id="mybtn">点我</button>
<script type="text/javascript" src="eventutil.js"/>
<script type="text/javascript">
  var btn = document.getelementbyid("mybtn");
  var handler = function () {
    console.log("clicked");
  }
  eventutil.addhandler(btn, "click", handler);
  eventutil.removehandler(btn, "click", handler);
</script>

还有一点，dom0 级对每一个事件只支持一个事件处理程序，好在现在只支持 dom0 级事件处理程序的浏览器几乎已经没有咯，所以不用担心啦 o(∩_∩)o~

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript事件相关操作与技巧大全》、《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。