JS入门

DOM0级事件处理程序

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

通过JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是第四代Web浏览器中出现的,而且至今仍然为所有现代浏览器所支持。原因一是简单,而是具有跨浏览器的优势。要使用JavaScript指定事件处理程序,首先必须取得一个要操作的对象的引用。

每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick。将这种属性的只设置为一个函数,就可以指定事件处理程序,如下所示:

var btn = document.getElementById("myBtn");
btn.onclick = function () {
 alert("Clicked");
};

在此,我们通过文档对象取得了一个按钮的引用,然后为它指定了onclick事件处理程序。但要注意,在这些代码运行之前不会指定事件处理程序,因此如果这些代码在页面中位于按钮后面,就有可能在一段时间内怎么单击都没有反映。

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行;换句话说,程序中的this引用当前元素。来看一个例子:

var btn = document.getElementById("myBtn");
btn.onclick = function () {
 alert(this.id);  //"myBtn"
};

单击按钮显示的是元素的ID,这个ID是通过this.id取得的。不仅仅是ID,实际上可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可以删除通过DOM0级方法指定的事件处理程序,只要像下面这样将事件处理程序属性的值设置为null即可:

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

将事件处理程序设置为null之后,在单击按钮将不会有任何动作发生。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评
e