jquery 事件注冊 与反复事件处理
<!doctype html>
<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 button注冊点击事件
$("#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 的button注冊点击事件
$("#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 button注冊点击事件
$("#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 的button注冊点击事件
$("#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 事件注冊 与反复事件处理的更多相关文章
- struts2+jquery验证注冊用户是否存在
注冊界面 register.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&q ...
- jquery 事件，注册 与重复事件处理
jquery有时候会出现重复注册一个事件的问题,导致点击一个事件,这个事件被重复执行,也就是触发事件的次数有几次, 那么这个事件就会被执行叠加重复几次. 我这边做的一个项目,在某个页面初始化的时候,给 ...
- jquery事件手冊
方法 描写叙述 bind() 向匹配元素附加一个或很多其它事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 ...
- jquery注冊文本框获取焦点清空,失去焦点赋值
在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...
- android点滴之标准SD卡状态变化事件广播接收者的注冊
眼下最完整的,须要注冊的动作匹配例如以下: IntentFilter intentFilter = new IntentFilter(Intent.ACTION_MEDIA_MOUNTED); int ...
- Android实战简易教程-第二十三枪（基于Baas的用户注冊验证username是否反复功能！）
接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...
- 完美的jquery事件绑定方法on()
在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,使用方法例如以下: $("#info_table td& ...
- jQuery事件传播，事件流
一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下 ...
- jQuery事件大全
jQuery事件大全 attribute: $(" p" ).addclass(css中定义的样式类型) 给某个元素添加样式 $(" img" ).attr( ...
随机推荐
- ExcelReader（解析Excel的工具类）
package cn.com.css.common.util; import java.io.IOException; import java.io.InputStream; import java. ...
- Declaration Merging with TypeScript
原文:https://blog.oio.de/2014/03/21/declaration-merging-typescript/ Why might you need this? There can ...
- HDoj-1863-畅通project-并查集
畅通project Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- QT For Android 运行的时候找不到手机怎么办？
[解决方法] 如果是Android手机,那需要下载这个: http://community.kde.org/Necessitas
- [CSS3] Parent relative and child absoulte
如果在一个容器中的子元素使用了position:absolute, 那么他可能会跑出父元素的框架范围. 如果想限定子元素在付元素的框架范围,可以在父元素上加position:relative; 对于一 ...
- Linux下C与Mysql的混合编程
1 概述 MySQL 是一个关系型数据库管理系统.由瑞典MySQL AB公司开发,眼下属于Oracle公司.MySQL是最流行的关系型数据库管理系统. 支持AIX.FreeBSD.HP-UX.Linu ...
- JavaScript 之 日常积累
1. <a>标签"加入收藏",兼容IE,FireFox等 function bookmarksite() { if (window.sidebar) { // Mozi ...
- VC操作MPP文件
1.背景简介 因需要对Office系列进行程序操作,特需要使用COM编程. Microsoft Project生成进度计划,office家族软件,文件后缀为.mpp. 具体信息见维基百科http:// ...
- 设置tableViewCell背景颜色
1 2 3 4 5 6 7 8 9 10 11 12 13 //方法一: cell.contentView.backgroundColor = [UIColor redColor]; //方法二: U ...
- uni-app 如何开启sass\less处理
开启方式:工具->插件安装->安装完成,启用即可