由于开学后的编程实验课,接触了海量字符换搜索的实验,所以好几天没有学习JS课程了,今天继续学习事件绑定。

  传统事件绑定存在一些问题,如:同名事件函数都执行,第二个函数会覆盖第一个。

  下面我们以事件切换器(传统绑定机制)为例。

  实现box标签属性红绿互换。如下:

window.onload=function(){
var box=document.getElementById('box');
box.onclick=toBlue;
}; function toRed(){
this.className='red';
this.onclick=toBlue;
} function toBlue(){
this.className='blue';
this.onclick=toRed;
}

  但传统事件机制容易出现以下的问题:覆盖问题、可读性问题和this传递问题。

  我们通过如下方法来解决这些问题。

  首先,添加一个事件函数addEvent。

function addEvent(obj,type,fn){
//用于保存上一个事件
var saved=null; //判断事件是否存在
if(typeof obj['on'+type]=='function'){
saved=obj['on'+type]; //保存上一个事件
}
//执行事件
obj['on'+type]=function(){
fn();
};
} addEvent(window,'load',function(){
alert('Lee');
}); addEvent(window,'load',function(){
alert('Mr.Lee');
});

  执行结果会出现Lee和Mr.Lee。

  当然,在添加其他事件时还会出现其他问题,如:this没有传递过去等。

  解决方法是利用call传递this。如:

    //执行事件
obj['on'+type]=function(){
fn.call(this);
};

  在事件切换中,常会出现过多切换会使浏览器卡死报错too much recursion。原因是保存了太多的事件,解决办法是及时释放执行过的事件对象。

  我们添加一个移除事件函数。如下:

function removeEvent(obj,type){
if(obj['on'+type]) obj['on'+type]=null;
}

  但我们在移除事件时,要注意不要一概而论,把整个事件对象全部删除,导致影响其他对象方法的调用。

  

  

  

  

  

  

  

Javascript事件绑定及深入的更多相关文章

  1. 第一百二十一节,JavaScript事件绑定及深入

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

  2. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  3. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  4. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  5. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  6. javascript事件绑定和普通事件的区别

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. javascript 事件绑定

    一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...

  8. javascript事件绑定1-模拟jquery可爱的东西

    1.给对象添加事件attachEvent(兼容IE,不兼容ff.chrome) <html xmlns="http://www.w3.org/1999/xhtml"> ...

  9. JavaScript事件绑定的常见方式

    在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...

  10. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

随机推荐

  1. java监听事件

    2014年2月23日 09:51:54 成功添加了打开官网的事件, 回头研究下,那个打开url的类 java的System.getProperty()方法可以获取的值 ################ ...

  2. 使用PopupMenu创建弹出式菜单

    PopupMenu代表弹出式菜单,它会在指定组件上弹出PopupMenu,默认情况下,PopupMenu会显示在该组件的下方或上方.PopupMenu可增加多个菜单项,并可为菜单项增加子菜单. 使用P ...

  3. iOS 之 微信开发流程

    第1阶段 注册开放平台帐号 注册成为微信开放平台开发者 立即注册 认证开发者资质 开发者资质认证通过后才可申请微信支付,申请审核服务费:300元/次 立即认证 创建APP并提交审核 提交你的APP基本 ...

  4. 1.TCP/IP基本概念

    为什么会有TCP/IP协议 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他们无法合作一样 ...

  5. Storm学习笔记六

    1 Storm的通信机制 说明:1.worker与worker之间跨进程通信: 2.worker内部中各个executor间的通信,Task对象--->输入队列queue--->执行--- ...

  6. Angular - - ngList、ngRepeat、ngModelOptions

    ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式  通过这个值分隔字符串. ...

  7. PHP导入导出Excel方法

    看到这篇文章的时候,很是惊讶原作者的耐心,虽然我们在平时用的也 有一些,但没有作者列出来的全,写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xm ...

  8. 关于在官网上下载Eclipse遇到的问题!!

    首先Eclipse是什么? Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境. 幸运的是,Eclipse 附带了一 ...

  9. Apple官方IOS开发入门教程[v0.2]

    今天,又跑去找IOS开发入门教程了,结果发现没什么好的PDF. 后来发现,原来苹果官方有开发入门教程,而且写的很好.所以整理出来了,给大家分享一下. 我就不在这里贴pdf的内容了,下面有苹果官方教程的 ...

  10. POJ1050(dp)

    To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 46788   Accepted: 24774 Desc ...