JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
JQuery事件one，支持参数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件one，支持参数</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("*").each(function (index, item) {
$(item).one("click", { name: "wyp", age: 33 }, function (event) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡
//取消form表单提交或a打开的超连接
event.preventDefault();
//同样也支持取消事件冒泡
//event.stopPropagation();
});
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
<a id="link" href="http://www.baidu.com">超连接（第一次点击执行click事件，第二次点击打开超链接）</a>
<form id="form" action="http://www.baidu.com">
<input id="submit" type="submit" value="submit（第一次点击执行click事件，第二次点击提交表单）" />
</form>
</div>
</div>
<input type="button" id="one" value="one（只执行一次click事件）" />
<div id="content">
</div>
</body>
</html>
jquery_event06_one
JQuery事件bind，支持参数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件bind，支持参数</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("*").each(function (index, item) {
$(item).bind("click", { name: "wyp", age: 33 }, function (event) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡
//取消form表单提交或a打开的超连接
event.preventDefault();
//同样也支持取消事件冒泡
//event.stopPropagation();
});
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
<a id="link" href="http://www.baidu.com">超连接（每次点击都执行click事件）</a>
<form id="form" action="http://www.baidu.com">
<input id="submit" type="submit" value="submit（每次点击执行click事件）" />
</form>
</div>
</div>
<input type="button" id="bind" value="bind（每次点击都执行click事件）" />
<div id="content">
</div>
</body>
</html>
jquery_event07_bind
JQuery事件bind-unbind，支持绑定和取消绑定多个事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件</title>
<style>
.bg{
background-color:yellow;
color:blue;
}
</style>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//bind支持绑定多个事件
$("#child").bind("mouseenter mouseleave", function (event) {
$(this).toggleClass("bg");
});
//unbind支持取消绑定事件
$("#child").unbind("mouseleave");
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
鼠标经过这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event08_bind_unbind
JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）</title>
<style>
.bg{
background-color:yellow;
color:blue;
}
</style>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//bind支持命名空间的方式绑定事件
$("#child").bind("mouseenter.test mouseleave.test", function (event) {
$(this).toggleClass("bg");
});
//unbind支持通过命名空间的方式取消绑定事件
$("#child").unbind(".test");
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
鼠标经过这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event09_bind_unbind_namespace
JQuery事件bind不支持动态添加html的事件绑定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件bind不支持动态添加html的事件绑定</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$(".child").bind("click", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持bind事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
</body>
</html>
jquery_event10_bind_problem
JQuery事件live支持动态添加html的事件绑定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件live支持动态添加html的事件绑定</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$(".child").live("click", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
</body>
</html>
jquery_event11_live_solution_bind_problem
JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#content").bind("click", function (event) {
//closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。如果自己满足就返回，如果自己不满足，继续向上找。
var obj = $(event.target).closest(".child");
if (obj[0] == event.target) {
window.alert($(event.target).html());
}
/*
对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题：每个事件都会冒泡到content上面去，而且还会继续往上冒泡，开销变大
*/ });
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
</body>
</html>
jquery_event12_bind_solution_bind_problem
JQuery事件live支持动态添加html的事件绑定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件live支持动态添加html的事件绑定</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$(".child").live("click", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
//如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
<div id="other">
<div class="child">333333</div>
</div>
</body>
</html>
jquery_event13_live_problem
JQuery事件live支持动态添加html的事件绑定，使用上下文参数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件live支持动态添加html的事件绑定，使用上下文参数</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
$(".child", "#content").live("click", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
<div id="other">
<div class="child">333333</div>
</div>
</body>
</html>
jquery_event14_live_solution_context
JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。
$("#content").delegate(".child", "click", function (event) {
window.alert($(this).html());
});
//替换live的写法
//$(".child", "#content").live("click", function (event) {
// window.alert($(this).html());
//});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
<div id="other">
<div class="child">333333</div>
</div>
</body>
</html>
jquery_event15_delegate_replace_live
JQuery事件on动态添加html不支持事件绑定，等同于bind
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件on动态添加html不支持事件绑定，等同于bind</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$(".child").on("click", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
<div id="other">
<div class="child">333333</div>
</div>
</body>
</html>
jquery_event16_on_replace_bind
JQuery事件on支持动态添加html事件绑定
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件on支持动态添加html事件绑定</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#content").on("click",".child", function (event) {
window.alert($(this).html());
});
$("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="content">
<div class="child">111111</div>
</div>
<div id="other">
<div class="child">333333</div>
</div>
</body>
</html>
jquery_event17_on_solution_context
JQuery事件on-off，支持绑定和取消绑定多个事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件on-off，支持绑定和取消绑定多个事件</title>
<style>
.bg{
background-color:yellow;
color:blue;
}
</style>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//on支持绑定多个事件
$("#child").on("mouseenter mouseleave", function (event) {
$(this).toggleClass("bg");
});
//off支持取消绑定事件
$("#child").off("mouseleave");
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
鼠标经过这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event18_off_relace_unbind
JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//$("*").not("a")
//$("*:not(a)")
//$("*").filter(":not(a)")
//以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件
$("*").not("a").bind("click", function (event, note) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡
//取消form表单提交或a打开的超连接
//event.preventDefault();
//同样也支持取消(*)事件冒泡
//event.stopPropagation();//通过A使用trigger之后，这里还可以使用取消事件冒泡的方法。
}); $("a").bind("click", function (event) {
//取消form表单提交或a打开的超连接
event.preventDefault();
//同样也支持取消(A)事件冒泡
event.stopPropagation();
$("#button").trigger("click", ["通过a点击的click事件"]);//支持事件冒泡
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
<a id="link" href="http://www.baidu.com">超连接（trigger）</a>
<input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event19_trigger
JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//$("*").not("a")
//$("*:not(a)")
//$("*").filter(":not(a)")
//以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件
$("*:not(a)").bind("click", function (event, note) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡
//取消form表单提交或a打开的超连接
//event.preventDefault();
//同样也支持取消(*)事件冒泡
//event.stopPropagation();//通过A使用triggerHandler之后，这里可以不再使用阻止事件冒泡的方法。但是直接点button还是会出现事件冒泡
});
$("a").bind("click", function (event) {
//取消form表单提交或a打开的超连接
event.preventDefault();
//同样也支持取消(A)事件冒泡
event.stopPropagation();//
$("#button").triggerHandler("click", ["通过a点击的click事件"]);//阻止事件冒泡
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
<a id="link" href="http://www.baidu.com">超连接（triggerHandler）</a>
<input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event20_triggerHandler
JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别的更多相关文章
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- JQuery中事件冒泡
JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- !!!jQuery中事件绑定 推荐使用.delegate()或者live()
jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树 首先,可视化一个HM ...
- jQuery中事件与动画的总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是 ...
- jQuery中事件绑定
一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$ ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery中事件的学习
刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...
- jquery 中事件
jQuery 事件 - submit() 方法 定义和用法 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素. submit() 方法触发 submit 事件,或规定当发生 subm ...
随机推荐
- 《C和指针》整理一
1.C语言的凝视 在C语言中,假设须要凝视掉一段代码.且代码中可能会已经存在/**/凝视形式,那么能够使用: #if 0 statements #endif 这样的形式来凝视掉 ...
- pat 1060 比较科学计数法
trick: 1.前导0 如:000001,000.000001 2.出现0时也要按照科学计数法输出 e.g. 4 00000.00000 0001 NO 0.0000*10^0 0.1*10^1 3 ...
- linux进程、调度、线程、进程上下文等几点理解
1.信号来自进程或内核 2.线程共享进程的代码空间和数据空间(全局变量或静态变量),文件描述符,信号,以及malloc分配的内存,每个线程拥有独立的栈空间和程序计数器,在创建线程时,调用pthread ...
- （转）看懂UML类图和时序图
从一个示例开始 请看以下这个类图,类之间的关系是我们需要关注的: 车的类图结构为<<abstract>>,表示车是一个抽象类: 它有两个继承类:小汽车和自行车:它们之间的关系为 ...
- OpenGL视图--gluPerspective glOrtho glFrustum gluLookAt
void gluPerspective( GLdouble fovy, GLdouble aspect, GLdouble zNear, GLdouble zFar ) near 和 far 决定了投 ...
- json字符串和dict互转
json字符串和dict互转 import json str = '{"params":[{"id":222,"offset":0},{&q ...
- Cognos业务洞察力：My First Business Insight
Cognos Dashboard Cognos Dashboard 可以展示具有重要影响力的信息,以监视.衡量和管理企业绩效. IBM Cognos Dashboard(仪表盘)使任何用户能够以支持其 ...
- 如何：使用TreeView控件实现树结构显示及快速查询
本文主要讲述如何通过使用TreeView控件来实现树结构的显示,以及树节点的快速查找功能.并针对通用树结构的数据结构存储进行一定的分析和设计.通过文本能够了解如何存储层次结构的数据库设计,如何快速使用 ...
- C# Lambda表达式 基础
什么是Lambda 表达式? "Lambda表达式"实际上是一个方法,只不过该方法是一个匿名方法(就是没有名字的方法(函数),就是说只有在定义的时候能调用,在其他地方就不能调用了) ...
- Codeforces#86D Powerful array（分块暴力）
Description An array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary su ...