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(){
alert(this.id);
},false);
//移除
btn.removeEventListener("click",function(){ //这样写没有用 (因为胃第二次与第一次相比是一个完全不同的函数)
alert(this.id);
},false);

解决办法:

代码如下:
var btn=document.getElementById("mybtn");
var hander=function(){
alert(this.id);
};
btn.addEventListener("click",hander,false);

btn.removeEventListener("click",hander,false); // 有效

注意:这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下,都是就事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。

[转]javascript指定事件处理程序包括三种方式:的更多相关文章

  1. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  2. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

  3. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

  4. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  5. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  6. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  7. JavaScript阻止修改对象的三种方式

    JavaScript中,我们希望别人无法修改我们创建的对象.比如,代码库的作者很可能想锁定核心库的某些部分来保证它们不被意外地修改.ES5中引入了三种锁定修改的级别:防止扩展preventExtens ...

  8. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

随机推荐

  1. 我的WCF之旅(3):在WCF中实现双工通信

    双工(Duplex)模式的消息交换方式体现在消息交换过程中,参与的双方均可以向对方发送消息.基于双工MEP消息交换可以看成是多个基本模式下(比如请求-回复模式和单项模式)消息交换的组合.双工MEP又具 ...

  2. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.2

    The elementary tensors $x\otimes \cdots \otimes x$, with all factors equal, are all in the subspace ...

  3. 《深入Java虚拟机学习笔记》- 第16章 控制流

    <深入Java虚拟机学习笔记>- 第16章 控制流

  4. HDU4865 Prince and Princess 强连通分量+二分图判定

    这个题就是建图费点劲,别的和我上一篇博客一样 然后,参考思路请戳这里http://www.cnblogs.com/wally/archive/2013/09/12/3317883.html 补充:这个 ...

  5. 设计模式_Bridge

    形象的例子: —早上碰到MM,要说早上好,晚上碰到MM,要说晚上好:碰到MM穿了件新衣服,要说你的衣服好漂亮哦,碰到MM新做的发型,要说你的头发好漂亮哦.不要问我“早上碰到MM新做了个发型怎么说”这种 ...

  6. 线性存储结构-Stack

    Stack继承于Vector,是一个模拟堆栈结构的集合类.当然也属于顺序存储结构.这里注意Android在com.android.layoutlib.bridge.impl包中也有一个Stack的实现 ...

  7. 网页推送库 SignalR

    SignalR 可以用这个库开发网页聊天室应用 ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能 ...

  8. CentOS上安装MySQL

    1.准备RPM安装包 MySQL-server-5.6.33-1.linux_glibc2.5.x86_64 MySQL-client-5.6.33-1.linux_glibc2.5.x86_64 2 ...

  9. Deep learning:三十四(用NN实现数据的降维)

    数据降维的重要性就不必说了,而用NN(神经网络)来对数据进行大量的降维是从2006开始的,这起源于2006年science上的一篇文章:reducing the dimensionality of d ...

  10. C语言不支持默认参数,不过可以用宏来模拟

    C语言不支持默认参数,不过可以用宏来模拟: //--------------------------------------------------------------------------- ...