事件绑定,常见的是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事件绑定及深入

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

  4. js 事件绑定

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

  5. js事件绑定函数

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

  6. JS事件绑定深入

    W3C很好地解决了覆盖问题.相同函数屏蔽的问题.this传递问题.添加额外方法不被覆盖等问题. 但是IE8之前的版本并不支持,IE9已完全支持了. IE和W3C在事件绑定上存在很多差异,我们以冒泡和捕 ...

  7. JS 事件绑定的几种方式 小笔记

    第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...

  8. js事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...

  9. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

随机推荐

  1. Silverlight 使用DataContractJsonSerializer序列化与反序列化 Json

    环境说明:Silverlight 5.1,.Net Framework  ​4.0 1.添加引用System.ServiceModel.Web.dll. 因为 System.Runtime.Seria ...

  2. 物联网平台设计心得:DateTimePicker实现选择联动

    所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...

  3. JNI ReferenceTable overflow

    今天在小米设备上遇到如下问题 10-15 17:04:36.899: W/dalvikvm(2767): ReferenceTable overflow (max=512) 10-15 17:04:3 ...

  4. ASP.NET MVC 请求流程:Route

    1.RouteTable RouteTable翻译过来的意思就是路由表,一个Web应用程序具有一个全局的路由表,该路由表通过System.Web.Routiing.RouteTable的静态只读属性R ...

  5. SpringMVC的Controller中使用线程安全的初始化

    因为SpringMVC的Controller默认是单例, 在这种情况下, Controller中使用的私有变量必须也是单例, 例如各种service, 否则会有多线程访问数据互相修改的问题. 对于需要 ...

  6. #敏捷个人资料# 免费下载 《敏捷个人-认识自我,管理自我 v0.8.pdf》

    快乐.高效.平衡,做一个爱学习.有目标.懂生活的影响者. 从今天开始至7月31日,点击http://t.cn/Rv3koHU 免费收到 1000多页的 <敏捷个人-认识自我,管理自我 v0.8. ...

  7. PCA和LDA降维的比较

    PCA 主成分分析方法,LDA 线性判别分析方法,可以认为是有监督的数据降维.下面的代码分别实现了两种降维方式: print(__doc__) import matplotlib.pyplot as ...

  8. centos下编译安装mysql5.5/5.6

    2013年11月16日 19:39:13 centos 6 mysql 5.5.28 我只说些我出错的地方: cmake后删除的方法是 xargs rm < install_manifest.t ...

  9. php中定义网站根目录的常用方法

    define('BASE_PATH',str_replace('\\','/',realpath(dirname(__FILE__).'/../')));

  10. Laravel不同数据库的模型之间关联

    假设ModelA和ModelB之间是BelongsTo的关系 如果同属于一个数据库连接 那么 public function a(){ return $this->belongsTo(" ...