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 ...
随机推荐
- kali linux 更新软件源，安装中文输入法，修复Linux与windows引导菜单解决windows引导丢失
1. 更新软件源打开sources.list文件,进行添加更新源:leafpad /etc/apt/sources.list 2. 添加软件源#官方源 deb http://http.kali.org ...
- HTTP基础知识
HTTP是计算机通过网络进行通信的规则,是一种无状态的协议,不建立持久的连接(客户端向服务器发送请求,web服务器返回响应,接着连接就被关闭了): 一个完整的HTTP请求连接,通常有下面7个步骤: 1 ...
- Jekyll: .md to .html with self defined themes..
theme is from here $ gem install jekyll bundler ~ $ jekyll new my-awesome-site ~ $ cd my-awesome-sit ...
- 用Jedis获取redis连接(集群和非集群状态下)
第一:非集群状态下 非集群状态下用Jedis获取redis连接,得到Jedis对象即可,一共有两种: 1.利用Jedis构造器,仅限用于测试,在实际项目中肯定是用JedisPool. Jedis(St ...
- 委托的BeginInvoke和EndInvoke方法
.NET Framework 允许异步调用任何方法,为了实现异步调用目标,需要定义与被调用方法具有相同签名的委托.公共语言运行时会自动使用适当的签名为该委托定义 BeginInvoke 和 EndIn ...
- shape的使用
android在布局边缘位置处理圆角的两个办法: 1),一个是直接让美工切一张带有圆角的图片. 2),使用shape来解决. 第一种不在赘述,主要讲一下第二中方法来实现. 上边缘出现圆角,下边缘正常的 ...
- php编译错误Note that the MySQL client library is not bundled anymore!
Note that the MySQL client library is not bundled anymore! 解决方法. 1. 查看系统有没有安装mysql header find / -na ...
- User.java 实体类 带 数据库字段模板
package com.tgb.web.controller.entity; import javax.persistence.Column; import javax.persistence.Ent ...
- android view构造函数研究
上周遇到了SurfaceView的constructor的问题,周末决定略微细致地研究一下这个令人发指的玩意. SurfaceView是View的子类,与View一样有三个const ...
- nginx 中文文件名显示问题
VPS论坛里已经说过设置方法,不过貌似很多人还是会遇到中文乱码的问题,Apache可以使用mod_encoding支持中文目录和文件,LNMP下Nginx其实不需要安装额外的组件即可支持中文文件名或中 ...