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( ...
随机推荐
- ItemsControl
<ItemsControl Grid.Row=" ItemsSource="{Binding Content.patientInfoList}" Width=&qu ...
- IT运维流程 — ITIL
导读 在IT运维中,最有名也是最实用的流程就是ITIL.说到这里,我想大家都有过实施ITIL痛苦的经历,一定会有人说:我们没有办法实施ITIL. 问:ITIL是什么? 答:ITIL即IT基础架构库(I ...
- Mac下如何进行端口转发，方便一系列需要使用80端口进行的调试工作
上篇文章介绍到,可以在本地hosts文件中添加一条记录将微信公众号中的可信域名解析道本地127.0.0.1,但tomcat在Mac下非root权限80端口是启动不了的,所以我们可以利用pfctl端口转 ...
- 查看centos当前版本
# rpm -q centos-release centos-release-5-4.el5.centos.1
- 【深入JAVA】java注解
在阅读的过程中有不论什么问题,欢迎一起交流 邮箱:1494713801@qq.com QQ:1494713801 1.什么是java注解 注解,顾名思义,注解,就是对某一事物进行加入凝视 ...
- Linux下C与Mysql的混合编程
1 概述 MySQL 是一个关系型数据库管理系统.由瑞典MySQL AB公司开发,眼下属于Oracle公司.MySQL是最流行的关系型数据库管理系统. 支持AIX.FreeBSD.HP-UX.Linu ...
- CAD打开慢，卡在99%
问题描述 打开AutoCAD的时候,软件停留在加载99%,点击出现[无法响应],要么等待,要么强行关闭,若平时正常关闭CAD时也异常缓慢. 原因分析 破解版,没有联网就激活了.CAD默认启动需要联网, ...
- Java从零开始学三(public class和class)
使用public class和class声明的区别 public class文件名称必须与类名称一致 class文件名称可以与类名称不一致
- Linux高性能server编程——多线程编程（下）
多线程编程 条件变量 假设说相互排斥锁是用于同步线程对共享数据的訪问的话.那么条件变量则是用于线程之间同步共享数据的值. 条件变量提供了一种线程间的通信机制:当某个共享数据达到某个值得时候,唤醒等待这 ...
- 1z0-052 q209_8
8: Note the following structures in your database server: 1. Extents 2. OS Blocks 3. Tablespace 4. S ...