jquery 事件注冊 与反复事件处理
2017-04-11 17:07
274 查看
<!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>
<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事件处理方法
- jQuery 的事件处理
- jQuery 原理的模拟代码 -3 事件处理
- jquery之jquery事件处理模型(删除事件处理程序)
- jquery之jquery事件处理模型(利用jquery绑定事件处理程序)
- jQuery使用手册之 事件处理
- jquery之jquery事件处理模型(起切换作用的监听器)
- jQuery -- 如何为动态添加的元素绑定事件处理函数
- jquery对事件冒泡的处理方法
- jQuery 和ExtJS的timeOut超时设置和event事件处理
- jQuery的timeOut超时设置和event事件处理
- jQuery 的事件处理
- jQuery 简化 DOM 脚本和事件处理
- Jquery使用手册6--事件处理 作者:choy
- 利用jQuery的$.event.fix函数统一浏览器event事件处理
- 使用jQuery的validation后，无法引发asp.net按钮的事件处理程序
- 用jQuery处理键盘事件
- jQuery和ExtJS的timeOut超时设置和event事件处理
- jquery之jquery事件处理模型(影响事件传播)
- jquery之jquery事件处理模型(触发事件处理程序)