欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS事件-事件处理程序之DOM0级事件处理程序

程序员文章站 2022-03-19 23:45:25
通过javasscript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序同仁的方式是在第四代web是出现的,而且至今仍然为所有现代浏览器所...

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

每一个元素(包括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之后,再单击按钮将不会有任何动作发生。

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