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 ...
随机推荐
- 微信小程序Nginx环境配置
环境配置概述 主要内容: SSL免费证书申请步骤 Nginx HTTPS 配置 TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申 ...
- [leetcode]Sum Root to Leaf Numbers @ Python
原题地址:http://oj.leetcode.com/problems/sum-root-to-leaf-numbers/ 题意: Given a binary tree containing di ...
- 3 Sum leetcode java
题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find al ...
- Android -- uses-sdk:minSdkVersion 10 cannot be smaller than version L declared in library com.android.support:appcompat-v7:21.0.0-rc1
这是一个报错,是我在Android Studio上添加完Support-v4和v7包之后爆出的错误,百度了好久也没有百度到.当时我的项目有minSdkVersion 19. 设置版本最小为L的时候也会 ...
- 通过WebRTC实现实时视频通信（二）
通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在上一篇文章中,我们讲解了WebRTC的概述.历史.安全性和开发者工具.接下来我 ...
- android 如何连真机测试
1. 设置android手机为USB调试模式.步骤: menu---> 设置 ---> 应用程序 ---> 开发 , 选择[USB调试] 2. 用USB连接手机和电脑,并确保成功.步 ...
- 移动端兼容 - faskclick.js
fasckclick为解决移动端300ms延迟而生 github地址为:https://github.com/ftlabs/fastclick 使用方法: 1. 原生使用(window.onload或 ...
- kafka delete topic
Don't think it is supported yet. Take a look at this JIRA tracking Delete Topic. For delete manually ...
- Oracle 11g 更改字符集
查看字符集: select * from v$nls_parameters where parameter = 'NLS_CHARACTERSET'; 修改字符集: sqlplus "/as ...
- HDU Always Cook Mushroom (极角排序+树状数组)
Problem Description Matt has a company, Always Cook Mushroom (ACM), which produces high-quality mush ...