jquery 事件注册 与重复事件处理
<html lang="us">
<head>
<meta charset="utf-8">
<title> test</title>
<script src="./jquery-1.10.2.js" type="text/javascript"></script>
<script>
function initEvents(){
//注册多次事件方法初始化
initOnEvent();
initBindEvent();
initClickvent();
initLiveEvent();
//只注册一个事件方法
oneEventByBindUnBind();
oneEvnetByDieLive();
}
function initOnEvent(){
//为id为onWayToEvent 按钮注册点击事件
$("#onWayToEvent").on("click",function(){
alert("this is one on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is two on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is three on event")
});
}
function initBindEvent(){
//为id为bindWayToEvent 的按钮注册点击事件
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. one")
});
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. two")
});
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. three")
});
}
function initClickvent(){
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. one");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
}
function initLiveEvent(){
$("#liveWayToEvent").live("click",function(){
alert("this is registry event by click. one");
});
/*
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
*/
}
function oneEventByBindUnBind(){
registryManyEvent("oneEvnetByBind");
$("#oneEvnetByBind").unbind("click").bind("click",function(){
alert("only you !!!!!!!");
});
}
function oneEvnetByDieLive(){
registryManyEvent("oneEvnetByDieLive");
$("#oneEvnetByDieLive").die().live("click",function(){
alert("the one of you !!!!!!");
});
}
function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});
$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}
</script>
<style>
.info{
width:100%;
height:auto;
float:auto;
margin:10px;
}
</style>
</head>
<body onload="initEvents()">
<h1>Welcome to jquery registry event test</h1>
<button id="onWayToEvent" >通过on的方式多次注册事件</button> </br>
<div class="info">
通过 on方法注册的事件，每次的注册不会把原来的方法覆盖掉。会以队列的形式保存起来
点击的时候，触发事情会一个个按注册的顺序执行。
主要代码：
function initOnEvent(){
//为id为onWayToEvent 按钮注册点击事件
$("#onWayToEvent").on("click",function(){
alert("this is one on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is two on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is three on event")
});
}
</div>
<button id="bindWayToEvent">通过bind的方法多次注册事件</button>
<div class="info" >
通过 jquery 的bind方法多次注册的方法也是一样，不会把原来的方法覆盖了，也是把方法以
队列的形式保存起来，触发事件后按注册次序逐个执行。
主要代码：
function initBindEvent(){
//为id为bindWayToEvent 的按钮注册点击事件
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. one")
});
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. two")
});
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. three")
});
}
</div>
<button id="clickWayToEvent">通过click方法多次注册事件</button>
<div class="info" >
通过 jquery 的click方法多次注册的方法也是上面的效果一样 。
主要代码：
function initClickvent(){
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. one");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
}
</div>
<button id="liveWayToEvent">通过live 方法多次注册事件</button>
<div class="info" >
要怎么样才能把前面的事件给覆盖掉，只保留最后注册的事件方法?
</div>
<button id="oneEvnetByBind">通过unbind,bind方法进行事件的唯一注册</button>
<div class="info">
这个方法可以行得通
主要代码：
function oneEventByBindUnBind(){
registryManyEvent("oneEvnetByBind");
$("#oneEvnetByBind").unbind("click").bind("click",function(){
alert("only you !!!!!!!");
});
}
function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});
$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}
</div>
<button id="oneEvnetByDieLive">通过 die live 方法进行事件的唯一加载</button>
<div class="info">
我们用的 jquery-1.10.2.js 这里没有提供 die live 方法。对于网上提供的这个方法是无效的。
主要代码：
function oneEvnetByDieLive(){
registryManyEvent("oneEvnetByDieLive");
$("#oneEvnetByDieLive").die().live("click",function(){
alert("the one of you !!!!!!");
});
}
function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});
$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}
</div>
</body>
</html>
jquery 事件注册 与重复事件处理的更多相关文章
- jquery 事件，注册 与重复事件处理
jquery有时候会出现重复注册一个事件的问题,导致点击一个事件,这个事件被重复执行,也就是触发事件的次数有几次, 那么这个事件就会被执行叠加重复几次. 我这边做的一个项目,在某个页面初始化的时候,给 ...
- jQuery 事件注册
重点事件注册.on() <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- jquery 事件对象笔记
jQuery元素操作 设置或获取元素固有属性 获取 prop(属性名) 修改 prop(属性名,值) 获取自定义属性 ...
- jquery事件重复绑定
本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个 ...
- jquery事件之事件处理函数
一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...
- 解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- jquery事件学习笔记（转载）
一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...
- 第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件——hove ...
- 解密jQuery事件核心 - 委托设计（二）
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
随机推荐
- C# html转mht
项目中引入cdosys.dll组件,位置: C:\Windows\System32\cdosys.dll CDO.ADODB 这些类都来自于cdosys.dll组件 /// <summary& ...
- wcf使用ssl连接方式设置
A.makecert -sr localmachine -ss My -n CN=TopupProxyServer -sky exchange -pe -r B.检索证书的指纹 ,证书名TopupPr ...
- mysql编码设置 [http://blog.knowsky.com/254652.htm]
MYSQL 2009-09-11 15:37 阅读73 评论1 字号: 大大 中中 小小mysql> SHOW VARIABLES LIKE 'character_set_%';+------- ...
- 使用node.js创建第一个应用
node.js应用组成部分 1.引入require模块:我们可以使用require指令来载入Node.js模块. 2.创建服务器:服务器可以监听客户端的请求,类似于Apache,Nninx等HTTP服 ...
- python字符串中的中文处理
python字符串中的字符串默认并非是unicode,如果在字符创中使用Unicode字符,如中文字符,必须要经过转换, 方式1: text = u"中文" 方式2: text = ...
- LoadRunner性能测试指标分析
Memory: ·Available Mbytes 简述:可用物理内存数.如果Available Mbytes的值很小(4 MB或更小),则说明计算机上总的内存可能不足,或某程序没有释放内存. 参考值 ...
- 关于LR监视Windows和linux的说明
一.监控windows系统: 1.监视连接前的准备工作 1)进入被监视windows系统,开启以下二个服务Remote Procedure Call(RPC) 和Remote Registry Ser ...
- java中的equals()方法
大家都知道,在Java中,对于对象的比较,如果用“==”比较的是对象的引用,而equals才是比较的对象的内容. 一般我们在设计一个类时,需要重写父类的equals方法,在重写这个方法时,需要按照以下 ...
- 宏定义重写NSLog
只需要 在ProjectName_Prefix.pch 中追加你对应的宏定义,不用import 就可以直接使用了. #define DEBUG //宏输出函数 #ifdef DEBUG #define ...
- 12.04 ubuntu 更改IP
在一个局域网里面,如果是自动获取IP,就会导致IP冲突 进入要连接的热点进行设置 IPV4 Setting address netmask ...