带你深入理解DOM0级事件处理程序!!!

DOM0级事件处理程序

通过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之后,再单击按钮将不会有任何动作发生。

提示:

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

本文由web前端精髓为您提供

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,158评论 1 6
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 651评论 0 2
  • 简单理解事件是用户或浏览器自身执行的某种动作。诸如click、load而事件处理程序则是响应某个事件的函数。诸如o...
    Miss____Du阅读 897评论 7 6
  • 1.事件代理 事件代理:为子元素添加监听器转变为为父容器添加监听器,然后通过event.target判断具体操作的...
    IT男的成长记录阅读 554评论 0 0
  • 最近在做iOS界面转场的动画,写完转场入口后基本元素还是回归到我们常用的基本动画代码,有关动画的帖子网络上一搜一大...
    大雄記阅读 5,559评论 0 18