事件绑定,常见的是odiv.onclick=function(){..........};  这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这里要说的是addEventListener方法,和IE下的attachEvent方法:

html代码如下:

<html>
<head>
</head>
<style>
#box{
height:400px;
width:400px;
background: red;
}
#son1{
height:300px;
width:300px;
background: green;
}
#son2{
height:200px;
width:200px;
background: purple;
}
</style>
<script> </script>
<body>
<div id='box'>box
<div id='son1'>son1
<div id='son2'>son2 </div>
</div>
</div> </body>
</html>

界面如下图:

下面是<script>中的代码(非IE浏览器下addEventListener):

 window.onload=function(){
var obox=document.getElementById('box');
var oson1=document.getElementById('son1');
var oson2=document.getElementById('son2'); oson2.addEventListener('click',function(){alert('son2 dinaji');})
oson1.addEventListener('click',function(){alert('son1 dinaji');})
obox.addEventListener('click',function(){alert('box dinaji');})
}

上述代码的addEventListener()只有两个参数,其实还有第三个参数:true/false  。默认的是false,代表在冒泡阶段调用事件处理程序,true代表在事件捕获阶段处理程序,

生活中还是以冒泡阶段处理为多。下面是IE下:

 window.onload=function(){
var obox=document.getElementById('box');
var oson1=document.getElementById('son1');
var oson2=document.getElementById('son2'); oson2.attachEvent('onclick',function(){alert('son2 dinaji');})
oson1.attachEvent('onclick',function(){alert('son1 dinaji');})
obox.attachEvent('onclick',function(){alert('box dinaji');}) }

IE下attachEvent()只有两个参数,没有第三个参数的true或false。因为IE默认的就只能是冒泡阶段捕获,这是当年浏览器大战的原因,个人猜测,可能是因为IE用户量多吧,导致现在默认的都是在冒泡阶段处理。

事件绑定最大的好处是可以绑定多个事件,对同一个元素对象上绑定的多个事件来说,非IE下这些事件的处理顺序是符合代码绑定的先后顺序的,但在IE下对于多个事件绑定的处理顺序正好相反。如:

非IE:

oson2.addEventListener('click',function(){alert('first');},true);  //先弹出 first
oson2.addEventListener('click',function(){alert('second');},true); //后弹出 second

IE:

oson2.attachEvent('onclick',function(){alert('first');});      //后弹出first
oson2.attachEvent('onclick',function(){alert('second');}); //先弹出second

既然能绑定事件,肯定能取消绑定事件,非IE下为removeEventListener(),IE 下为detachEvent()  ,这里需要注意的是括号内的参数必须和事件绑定时的参数一样,但对于匿名函数来说,哪怕函数一样也取消不了绑定,因为两者被认为是不同的,如下代码就取消不了绑定:

oson2.addEventListener('click',function(){alert('first');});
oson2.removeEventListener('click',function(){alert('first');}) //取消绑定不成功

本人又用了函数声明式尝试一下发现也不行:

oson2.addEventListener('click',function test(){alert('first');});
oson2.removeEventListener('click',function test(){alert('first');});

如上面两段代码所述把匿名函数function (){alert('first');} 改为function test(){alert('first');}一样不行。

结论:不管是匿名函数,还是函数声明都视为不同参数,不能成功取消绑定。



解决方法就是先声明一个函数,两者传入共同的函数名即可:

先声明函数:

var test=function(){alert('first');};

再把函数名当参数传入:

oson2.addEventListener('click',test);
oson2.removeEventListener('click',test); //成功取消绑定

以上代码是能成功的,但还要注意第三个参数也要一致,上述代码没有第三个参数则默认都是false,如果一个为true,那也不能取消成功:

oson2.addEventListener('click',t,true); //第三个参数为true表示 捕获时执行事件程序
oson2.removeEventListener('click',t); //默认为false ,不同的参数,不能取消绑定
两者都为true即可:
oson2.addEventListener('click',t,true);
oson2.removeEventListener('click',t,true);

下面是为解决浏览器兼容封装事件绑定:

function addEvent(element,event,fun){
if(element.addEventListener)
{
element.addEventListener(event,fun);
}
else if(element.attachEvent)
{
element.attachEvent('on'+event,fun);//注意要加on
}
}

下面是取消事件绑定的封装:

function removeEvent(element,event,fun){
if(element.removeEventListener)
{
element.removeEventListener(event,fun);
}
else if(element.detachEvent)
{
element.detachEvent('on'+event,fun);//注意要加on
} }

封装后再使用事件绑定和取消绑定就方便很多:

var t=function(){alert(' box ');};
var t1=function(){alert(' son1 ');};
var t2=function(){alert(' son2 ');};

绑定:

addEvent(obox,'click',t);
addEvent(oson1,'click',t1);
addEvent(oson2,'click',t2);

取消绑定:

removeEvent(obox,'click',t);
removeEvent(oson1,'click',t1);
removeEvent(oson2,'click',t2);

以上就是事件绑定的内容,也是自己的一次回顾。

js事件绑定的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

  3. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  4. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  5. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  6. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

  7. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

  8. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  9. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  10. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

随机推荐

  1. [转]mac 10.9.4下配置apache

    出处:http://yjmyzz.cnblogs.com mac 10.9.x已经自带了apache,可按如下步骤开启: 1.启动 sudo apachectl start 启动后,访问 http:/ ...

  2. 使用nodejs搭建图片服务器(一)

    背景 当我们开发一个Web项目的时候,为了将图片管理与web服务分离开,通常都会搭建一个图片服务器. 之所以选择nodejs是因为使用nodejs来搭建web项目相当简单而且快速,虽然这个图片服务器很 ...

  3. php中关于js保存文件至本地的问题

    最近在搞一个livezilla的在线客服聊天的东东,客户界面要求添加一个下载聊天记录的功能.于是我就是翻看了下网上的各种关于”js保存文件至本地“的资料,发现只能在IE下通过execCommand实现 ...

  4. JS基础回顾,小练习(实现each方法)

    function each(arr, fn) { for(var i=0;i<arr.length;i++){ fn(arr[i],i); } } var arr = ['java', 'c', ...

  5. ruby -- 进阶学习(四)paperclip上传中文命名图片

         Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...

  6. 红黑树(二)之 C语言的实现

    概要 红黑树在日常的使用中比较常用,例如Java的TreeMap和TreeSet,C++的STL,以及Linux内核中都有用到.之前写过一篇文章专门介绍红黑树的理论知识,本文将给出红黑数的C语言的实现 ...

  7. html5中的大纲

    html5中的大纲 前言: 在html5中我们可以使用结构元素来编排一份大纲,这样我们就可以通过这个网页的大纲来了解网页中有哪些内容,网页中以什么样的形式来组织这些内容有更清楚的认识. 1.html5 ...

  8. Redis设计与实现-客户端服务端与事件

    事件 redis服务器是事件驱动的,事件分为文件事件与时间事件 文件事件是服务器通过套接字与客户端连接,两者之间的通信会产生相应的文件事件,服务器监听并处理这些事件完成网络操作: 时间事件是指redi ...

  9. EF容器---代理类对象

    #region 修改--官方的修改是,先查询,然后修改 /// <summary> /// 修改--官方的修改是,先查询,然后修改 /// </summary> static ...

  10. P6 EPPM 16 R1 文档和帮助系统

    P6 EPPM 16 R1 文档和帮助系统 https://docs.oracle.com/cd/E74894_01/ http://docs.oracle.com/cd/E68202_01/clie ...