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

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. Assembly.LoadFrom加载程序集无法释放资源的解决方案

    下面此方法加载程序集会导致程序集一直被占用 Assembly asm = Assembly.LoadFrom(dllPath); 解决方案: //通过此方法读取可以解决dll被占用问题 byte[] ...

  2. mysql字符集校对

    常用的两种 utf8_general_ci 按照普通的字母顺序,而且不区分大小写(比如:a B c D)utf8_bin 按照二进制排序(比如:A排在a前面,B D a c) ci是 case ins ...

  3. Python练手例子(6)

    31.请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. 程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母. letter ...

  4. esyui datagrid 水平方向下方出来滚动条的原因是因为使用了同一列名

    esyui datagrid 水平方向下方出来滚动条的原因是因为使用了同一列名

  5. Thymeleaf常用th标签

    https://www.jianshu.com/p/f9ebd23e8da4 关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${collec ...

  6. 复制pdf文字出来是乱码

    PDF文件复制文本为乱码 - longzhinuhou的博客 - CSDN博客 https://blog.csdn.net/longzhinuhou/article/details/83758966 ...

  7. 【C++】基于邻接矩阵的图的深度优先遍历(DFS)和广度优先遍历(BFS)

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  8. jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

    jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...

  9. COMP9334 Project

    COMP9334 Project, Term 1, 2019:Fog/cloud ComputingVersion 1.0Due Date: 11:00pm Friday 26 April 2019. ...

  10. IDEA导入Git项目后右键项目找不到Git选项的解决方法

    进入Setting -> version Control -> 在下图的第二步中是否有灰色的Module,选中它->点击第三步的+即可 转自:https://blog.csdn.ne ...