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( ...
随机推荐
- Golang 中使用多维 map
http://tnt.wicast.tk/2015/11/02/golang-multiple-dimension-map/ Golang 的 XML/JSON 解析库乍看使用起来很方便,只要构造一样 ...
- MongoDB学习笔记（五）--复制集 && sharding分片
主从复制 主从节点开启 主节 ...
- 为Ubuntu 安装Transmission 2.90
Transmission 是 Ubuntu 的默认 BitTorrent 客户端,近期发布了最新的 Transmission 2.90 版本,目前已经可通过 PPA 为 Ubuntu 15.10.Ub ...
- linux cp覆盖每次都有提示
1.cp命令,目标已经存在,每次都提示是否覆盖,怎么办? 2.cp --help 可以看到选项-i的时候,才会提示,但是这里并没有-i,为什么每次都有提示? 3.原因是:这里执行的cp是一个别名,通过 ...
- 使用第三方类、库需要注意的正则类RegexKitLite的使用
一.到http://regexkit.sourceforge.net/下载RegexKitLite类,添加到项目中: 因为RegexKitLite使用ICU库,所以需要动态链接到/usr/lib/li ...
- uni-app - 如何打包
H5,spa应用,必须在服务器环境下运行 多看官方文档,打包涉及到支付.以及各平台兼容性,通过 官方API链接如下: https://uniapp.dcloud.io/platform H5打包 An ...
- PHP高级教程-JSON
PHP JSON 本章节我们将为大家介绍如何使用 PHP 语言来编码和解码 JSON 对象. 环境配置 在 php5.2.0 及以上版本已经内置 JSON 扩展. JSON 函数 函数 描述 json ...
- SQL Sever 2008配置工具中过程调用失败解决方法
刚刚装了VS2013.然后打开数据库时,不管怎样也连不上.打开数据库配置,出现例如以下界面: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHU5MzAx ...
- Log Sessions to Local Database
Add Rules to Fiddler to create a new menu item as follows: // Log the currently selected sessions in ...
- 解压版MySQL安装后初始化root密码
1: C:\Users\gechong>mysql