js事件绑定

事件绑定，常见的是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事件绑定的更多相关文章

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
js事件绑定细节说明
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...
js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些一.总结一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
js 事件绑定
事件绑定的方式 1. DOM 元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType do ...
js事件绑定函数
js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...
js事件绑定的几种方式
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTM ...
js事件绑定/监听
事件绑定/监听的方法 1.直接绑定顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...
原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

随机推荐

nn_slow和nn_fast
#define nn_fast(x) __builtin_expect ((x), 1) #define nn_slow(x) __builtin_expect ((x), 0) __builtin_ ...
MMO之禅（三）职业能力
MMO之禅(三)职业能力 --技术九层阶梯 Zephyr 201304 有了精神,我们还需要实际的行动. 到底需要什么能力?自我分析,窃以为为有九层,无所谓高低,因为每一层都需要不断地砥砺,编程,本身 ...
最近新装系统windows8.1+Mac。。。还没装驱动就遇到一堆问题。。。
---恢复内容开始--- 1,刚开始装好了,后来莫名看不到磁盘了,原因:64位mac盘会丢失盘符,所以macdrive也看不到...解决:(将AF改为06,修改内容后改回AF,早知道这么简单就不用重新 ...
[转] 关于hibernate的缓存使用
http://blog.csdn.net/woshichenxu/article/details/586361 1. 关于hibernate缓存的问题: 1.1.1. 基本的缓 ...
学习Sass之安装Sass（一）
为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...
pptv破解版程序，能够免费观看所有蓝光和会员影片！
pptv破解版程序,能够免费观看所有蓝光和会员影片!PPTV网络电视3.4.1.0012绿色版(去广告本地vip版)由Black Hawk精简破解,去掉播放时缓冲.暂停广告.去掉迷你推荐和推荐弹窗.禁 ...
MyBatis知多少（14）分散的数据库系统
任何一个重要的数据库无疑都会拥有不止一个依赖者.即使该数据库只是简单地被两个Web 应用程序所共享,也有许多事情需要考虑.假设有一个名为网上购物车的Web应用程序,它使用了一个包含类别代码的数据库.就 ...
【网站开发】在新浪SAE上搭建一个博客
概述在新浪SAE上搭建一个博客 1.访问新浪SAE站点 http://sae.sina.com.cn/ 2.注册新浪SAE 3.选择应用仓库 4.选择WordPress 5.安装WordPress ...
使用C语言描述静态链表和动态链表
静态链表和动态链表是线性表链式存储结构的两种不同的表示方式. 静态链表的初始长度一般是固定的,在做插入和删除操作时不需要移动元素,仅需修改指针,故仍具有链式存储结构的主要优点. 动态链表是相对于静态链 ...
debian7.1 sources.list
deb http://mirrors.163.com/debian wheezy main non-free contribdeb http://mirrors.163.com/debian whee ...

js事件绑定

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

随机推荐

热门专题