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( ...
随机推荐
- 深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...
- 为Ubuntu 安装Transmission 2.90
Transmission 是 Ubuntu 的默认 BitTorrent 客户端,近期发布了最新的 Transmission 2.90 版本,目前已经可通过 PPA 为 Ubuntu 15.10.Ub ...
- c语言中pthread的理解和使用
在头文件中看到#typedef unsigned long int pthread_t这句话怎么理解,pthread_t是一个什么类型呢? 相当于pthread_t实际是个unsigned long ...
- Memcached和Memcache 配置教程windows X64
一.Memcached和Memcache的区别: 网上关于Memcached和Memcache的区别的理解众说纷纭,我个人的理解是: Memcached是一个内存缓存系统,而Memcache是php的 ...
- jquery ui autocomplete 模拟百度搜索自动提示
直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- Retrofit2+Rxjava+MVP实践
此博文根据前面两篇文章 Android MVP 架构初试 Android MVP 架构封装 再结合主流框架Retrofit2+Rxjava来个实践 源码地址RxMVP 项目截图 Retrofit2+R ...
- Pinger2
import java.io.IOException;import java.io.InputStreamReader;import java.io.LineNumberReader;import j ...
- ZH奶酪：VirtualBox虚拟机与主机ping不通
6.进入虚拟机的Ubuntu(以下简称VBUbuntu),在VBUbuntu中用ifconfig查看ip地址,在Windows7中用ipconfig查看ip地址. 在VBUbuntu中ping Win ...
- error loading /system/media/audio/ui/Effect_Tick.ogg
问题原因: 同一个AVD,调试了很多个项目,产生了N多个log文件,这些文件可能产生了影响. 解决办法: 新建一个AVD即可.
- JBOSS启动报错解决方案
同一个jboss下不可以放不同的项目包,否则报错: 注意:如果后期使用,注意删除上图的本地文件,重新加载即可.