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 ...
随机推荐
- Redis4- llist的操作
数据类型List链表(1)介绍list类型其实就是一个双向链表.通过push,pop操作从链表的头部或者尾部添加删除元素.这使得list既可以用作栈,也可以用作队列.该list链表类型应用场景:获得最 ...
- GitHub上有很多不错的iOS开源项目
GitHub上有很多不错的iOS开源项目,个人认为不错的,有这么几个:1. ReactiveCocoa:ReactiveCocoa/ReactiveCocoa · GitHub:GitHub自家的函数 ...
- RF常用技巧随笔
合并xml输出文件: pybot --outputdir d:\test --log log1.html --report report1.html --output output1.xml -T d ...
- MFC连接Access讲解（3合1） .
方法一: 1.首先,要用#import语句来引用支持ADO的组件类型库(*.tlb),其中类型库可以作为可执行程序(DLL.EXE等)的一部分被定位在其自身程序中的附属资源里,如:被定位在msado1 ...
- shell编程之服务脚本编写，文件锁以及信号捕获
shell脚本编程是linux运维工程师必备的技能,也是非常重要的一个技能,所以把shell编程学好,只有好处.基础语法我也就不讲了,学过C语言这些语言的,稍微看一下就能明白shell编程的基础,所以 ...
- MySQL函数大全【转载】
转载自 http://www.jb51.net/article/40179.htm 一.数学函数ABS(x) 返回x的绝对值BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) ...
- yum仅下载不安装
通常是使用yum来安装解决依赖包关系,如果有一台服务器没法连接外网或yum源没有设置,希望通过另一台服务器将这些RPM包下载下来,然后再去安装.那么怎么使用yum工具来下载RPM包呢? 使用yum 要 ...
- DotNetBar教程
DotNetBar是一组用于.NET Framework环境下的一组组件集,利用该组件集能够打造绚丽并且实用的应用程序界面,给开发人员提供极大的便利.关于DotNetBar,详情请参考其官方网站:ht ...
- SQL 合并列值和拆分列值
合并列值 表结构,数据如下: id value ----- ------ aa bb aaa bbb ccc 需要得到结果: id values ------ ----------- aa,bb aa ...
- Struts2的运行机制简介
1.客户端通过URL请求tomcat 2.URL找到对应站点的WEB.xml 发现里面有 struts2配置 3.执行StrutsPrepareAndExecuteFilter类的init方法 4 ...