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 ...
随机推荐
- ASP.NET—015：ASP.NET中无刷新页面实现
原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...
- flink和spark stream等框架的对比
参考这篇文章: https://www.sohu.com/a/196257023_470008 我们当时的目标就是要设计一款低延迟.exactly once.流和批统一的,能够支撑足够大体量的复杂计算 ...
- [leetcode]Flatten Binary Tree to Linked List @ Python
原题地址:http://oj.leetcode.com/problems/flatten-binary-tree-to-linked-list/ 题意: Given a binary tree, fl ...
- 【Type】类型 ParameterizedType
Type 接口[重要] Type接口完整的定义: public interface java.lang.reflect.Type { /** * Returns a string describing ...
- connect-proxy rpm文件的安装
1. rpm文件下载 http://rpm.pbone.net/index.php3?stat=3&search=connect-proxy&srodzaj=3 2. rpm的安装 h ...
- 《linux 内核全然剖析》 sys.c 代码分析
sys.c 代码分析 setregid /* * This is done BSD-style, with no consideration of the saved gid, except * th ...
- Linux：su和su-的区别
大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户.Linux中切换用户的命令是su或su -. 如上图所示,一 ...
- 在 Win 7 下使用 VirtualBOX 虚拟机安装 OS X 10.9 Mavericks 及 Xcode 5
参考网址:http://bbs.feng.com/read-htm-tid-7625465.html
- Eclipse.ini參数设置（Maven Integration for Eclipse JDK Warning）
安装EclipseMaven插件后,Eclipse启动问题:Maven Integration for Eclipse JDK Warning. 解决方法: 1. 设置Eclipse使用的JRE为本 ...
- The 6 inspectors in XCode
Name Shortcut Key Description file helper Command + Option + 1 shows you all the file details relate ...