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 ...
随机推荐
- 12C CLONE PDB and config service_listener
Clone PDB PtestDEV to Ptestuat in testuat 1) Clone PtestDEV to Ptestuat C:\Windows\system32> ...
- insertAdjacentHTML方法详解
添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...
- 软件测试之α测试和Beta测试
实施验收测试的常用策略有三种,它们分别是: · 正式验收 · 非正式验收或Alpha 测试 · Beta 测试 因此,Alpha测试和Beta测试都属于验收测试.所谓验收测试是软件产品完成了功能测试和 ...
- sql语句-排序后加入序号再运算判断取想要的项
select a.id as aid,b.id as bid,a.city,a.cang,a.sid,a.time as atime,b.time as btime,a.price as aprice ...
- applicationhost.config web.config
在 IIS7 8两个版本中, 用户的配置,可以通过修改如上的配置文件来完成 applicationhost.config ,可以定义全局的 用户自己目录下的web.config,可以自己定义 但是,有 ...
- VBS脚本代码（手工编写---在windows 7上调用系统对话框，来选择文件）
'=========================================================================='' VBScript Source File - ...
- Chapter 2 Open Book——2
It was worse because I was tired; 更糟糕的是因为我疲惫了. I still couldn't sleep with the wind echoing around t ...
- JS进阶书籍
http://blog.csdn.net/bingqingsuimeng/article/details/40535291 本来想尝试每天回答或看已解决的3个问题来学习总结今天的知识点,看了下博文里面 ...
- hdu_4734_F(x)(数位DP水)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4734 题意:给你一个F(x)的定义,然后给你a,b,问你在0到b包括b有多少个数满足F(x)<= ...
- C# WebBrowser函数互相调用
在使用C#开发winform程序过程中,我们经常会碰到嵌入了一个WebBrowser的浏览器控件.很多时候,我们需要在程序里控制网页的显示方式,或者调用网页当中的某个JS函数,反过来,也有可能网页也需 ...