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 ...
随机推荐
- 6 cocos2dx粒子效果，类图关系，系统原生粒子和自己定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果
1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: USERS
ylbtech-Oracle:数据库实例: STOREBOOK > 表空间 > 编辑 表空间: USERS 表空间 > 编辑 表空间: USERS 1. 一般信息返回顶部 ...
- 第二章 Jackson属性名转换+属性忽略
@Data @JsonIgnoreProperties(ignoreUnknown = true) public class MyRecord { private boolean succeed; p ...
- Android数据存储之SQLite
SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,占用资源非常少,只有几百KB内存.支持Windows/Linux ...
- Android视频播放-SurfaceView和Mediaplayer
好几天没写博客了,处理了一点个人私事加上平时加班,基本上时间不充裕,上篇文章讲了一下用Mediaplayer来播放音乐,这次就讲讲使用Mediaplayer来和SurfaceView配合播放一个视频流 ...
- 20 个具有惊艳效果的 jQuery 图像缩放插件
jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...
- scala 学习笔记八 简洁性
Scala可以简洁地表示概念,有时甚至可以说过于简洁. 1.消除中间结果 在组合表达式中,最后一个表达式会变成整个表达式的结果.下面的例子中,值会被捕获到val result中,然后result从方法 ...
- git简单运用
创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库. 检出仓库 执行如下命令以创建一个本地仓库的克隆版本: git clone /path/to/repository ...
- [Node.js] Level 3 new. Steam
File Read Stream Lets use the fs module to read a file and log its contents to the console. Use the ...
- 封装scrollView 循环滚动，tableViewCell（连载） mvc
封装 封装 封装 ... 封装的重要性太重要了 给大家在送点干货 从一个项目中抽取出来的.和大家一起分享 封装scrollView 循环滚动.tableViewCell(连载) 明天还会更新 tabl ...