对于事件的绑定的方法有多种多样，但是在解除绑定事件的时候，就要注意使用的是那种绑定事件的方法，因为不同的绑定方法所对应的解除事件是不同的。

1. 原始写法

1.1 绑定事件：对象.事件=事件处理函数

<!doctype html>

<html>

<head>

<style type="text/css">

#div1{

width:200px;

height:200px;

background:pink;

margin-bottom: 10px;

}

</style>

</head>

<body>

<div id="div1"></div>  

<button type="button" id="btn1">绑定事件</button>

<button type="button" id="btn2">移除事件</button>

</body>
<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.onclick = function(){
alert(1);
}
</script>

</html>

1.2  解除事件： 对象.事件=null (此方法就是函数的覆盖)

<script type="text/javascript">
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
alert("btn1事件绑定成功！");
}
btn2.onclick = function(){
btn1.onclick =null;
alert("btn1所绑定的事件已经被移除！");
}
</script>

　　运行结果：在开始是，点击“绑定事件”按钮，会弹出一个提示框“btn1事件绑定成功！”，当点击“移除事件”按钮时，btn1所绑定的事件就已经移除了，并弹出提示

======================================================

2. 使用 attachEvent 、detachEvent、addEventListener 与 removeEventListener

2.1 事件绑定------attachEvent ，addEventListener

使用 attachEvent 和 addEventListenter 的好处就是，可以多次的进行事件的绑定，不向原始的方法那样，前面绑定的事件将会被后面的绑定的事件所覆盖，最后只能执行后面所绑定的函数。

attachEvent

<script type="text/javascript">

    var btn1= document.getElementById("btn1");

    btn1.attachEvent ('onclick',function(){alert('1');});

    btn1.attachEvent ('onclick',function(){alert('2');});

</script>

　　运行结果：2，1

说明：attachEVent 是先绑定后执行，它将先执行我后绑定的函数。

注意：1）attachEvent 只能兼容 IE7，IE8；

2）attachEvent 绑定的事件前面要加“on”

addEventListener

<script type="text/javascript">

    var btn1= document.getElementById("btn1");

    btn1.addEventListener ('click',function(){alert('1');},false);

    btn1.addEventListener ('click',function(){alert('2');},false);

</script>

　　

　运行结果：1，2

说明：1) addEventListener 是先绑定先执行，它将按顺序执行我绑定的事件。

2) addEventListener 的第三个参数：

布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序

注意：1）addEventListener 与 attachEVent 正好相反， 只不兼容 IE7，IE8，其他大部分的浏览器都可以执行。

2）addEventListener 绑定的事件前面不要加“on”

2.2 事件解除------detachEvent，removeEventListener

detachEvent

<script type="text/javascript">

    var fun = function(){

        alert(11);

    }

    var btn1= document.getElementById("btn1");

    var btn1= document.getElementById("btn1");

    btn1.attachEvent ('onclick',fun,false);

    btn1.detachEvent('onclick',fun,false);

</script>

　removeEventListener　

<script type="text/javascript">

    var fun = function(){

        alert(1);

    }

    var btn1= document.getElementById("btn1");

    btn1.addEventListener('click',fun,false);

    btn1.removeEventListener('click',fun,false);

</script>

　　注意：1） 在removeEventListener 传入的参数与 addEventListener 传入的参数要一致，看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的与第一个是完全不同的函数。

2） 因为移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。

 btn1.addEventListener('click',function(){alert(1);},false);

 btn1.removeEventListener('click',function(){alert(1);},false);//无效

　　       3）在公用函数体存在参数的情况下，不能将带参数的函数体传给 addEventListener 和 romoveEventListener。

错误示例：

<script type="text/javascript">

    var fun = function(e){

        e.preventDefault();//阻止事件目标的默认动作

        alert(1);

    }

    var btn1= document.getElementById("btn1");

    btn1.addEventListener('click',fun(event),false);

    btn1.removeEventListener('click',fun(event),false);

</script>

　　正确示例：

<script type="text/javascript">

    var fun = function(e){

        e.preventDefault();//阻止事件目标的默认动作

        alert(1);

    }

    var btn1= document.getElementById("btn1");

    btn1.addEventListener('click',fun,false);

    btn1.removeEventListener('click',fun,false);

</script>

4）detachEvent 与   removeEventListener 注意事项相同。

JavaScript之事件的绑定与移除的更多相关文章

  1. js监听事件的绑定与移除

    监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(ty ...

  2. js 多个事件的绑定及移除(包括原生写法和 jquery 写法)

    需要打开控制台查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js事件的绑定与移除

    事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...

  4. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

  5. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

  6. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  7. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  8. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  9. JavaScript事件属性绑定带参数的函数

    JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...

随机推荐

  1. CentOS6.5yum配置本地源

    进入repos.d目录 cd /etc/yum.repos.d 创建临时文件夹repo.bak(文件夹名随意起 使用root权限) 将以下文件移到repo.bak文件夹(以防备用) -rw-r--r- ...

  2. Lecture5_1&5_2.随机变量的数字特征（数学期望、方差、协方差）

    一.数学期望 1.离散型随机变量的数学期望 设X为离散随机变量,其概率分布为:P(X=xk)=pk 若无穷级数$\sum_{k=1}^{+\infty}x_kp_k$绝对收敛 (即满足$\sum_{k ...

  3. 记一次FileZillaServer提权

    前段时间检测一个企业网站,在检测该企业的一个下属公司的网站时通过用户名admin和密码123456进入了后台,后台目录就是公司汉语拼音+admin,诸如xxxadmin这种形式的.在后台通过“产品图片 ...

  4. Python 学习笔记2 变量

    Python变量的一些命名规则和指南 每种编程语言都需要变量, 这些变量的命名,我们一般会遵守一些公认的规则. 已达到方便自己,他人阅读的好处. 变量只能包含字母.数字和下划线.变量可以以字母和下划线 ...

  5. Qt-不调用CoInitialize-实现SDL多线程运行

    使用Qt开发程序,参考的MFC的程序中有CoInitialize.结果Qt程序调用不了,导致SDL不能音视频同步.此时SDL的初始化是放在主程序里的. 把SDL的初始化部分放到了辅助线程里,运行就正常 ...

  6. WSL（Windows Subsystem for Linux)笔记一安装与使用

    1.安装linux子系统 很简单直接在启动或关闭windows功能 中选择“适用于linux的windows子系统”,确定安装后重启即可,安装还是比较快的只用了几分钟. 也可以直接使用shell命令行 ...

  7. PySe-008-开启浏览器的手机模式

    以 Chrome 为例,通过设置 chromeoption 的参数即可实现启动浏览器后,开启手机模式.相应设置的源代码如下所示: chromeOptions = webdriver.ChromeOpt ...

  8. C# 使用MongoDB遇到的问题

    错误:缺少 System.Runtime.InteropServices.RuntimeInformation.dll version = 4.0.0 解决方法: 下载了System.Runtime. ...

  9. win7 64位系统下安装autoitlibrary库遇到问题解决

    转载来自http://blog.sina.com.cn/s/blog_53f023270101skyq.html 今天需要在win7 64位系统下安装autoitlibrary库,起初安装好了robo ...

  10. Centos部署PHP项目（安装Apache，PHP）

    1.apache安装 [root@tele-2 ~]# yum install httpd 2.外网访问虚拟机中的地址,我们就需要修改一下apache的配置文件 vim  /etc/httpd/con ...