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 ...
随机推荐
- Java输入输出处理技术2
7.从键盘输入 从键盘输入一行字符,并显示到屏幕上. package io; import java.io.*; public class ReadAndWrite { public static v ...
- Python并发编程-进程 线程 同步锁 线程死锁和递归锁
进程是最小的资源单位,线程是最小的执行单位 一.进程 进程:就是一个程序在一个数据集上的一次动态执行过程. 进程由三部分组成: 1.程序:我们编写的程序用来描述进程要完成哪些功能以及如何完成 2.数据 ...
- 解决报错"Your security system have blocked an application with expired or not yet valid certificate from running"
方法如下: Go to Control Panel Java in the Security tab click the "Edit Site List-" button clic ...
- Flatten Binary Tree to Linked List leetcode java
题目: Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 ...
- ElementUI的提示框的使用记录
1.popover点击之后隐藏 问题描述:做了一个通知面板功能,下面提示信息有路由,每次点击消息呢,就跳转到了路由页面,但是此时这个面板没关闭,希望将其关闭 解决:官方文档有个属性 <div&g ...
- Android -- 打开本地图片且显示路径
背景 代码 ...
- 转： Source Code Lookup in Eclipse(主要讲的是java的)
Source Code Lookup in Eclipse https://www.intertech.com/Blog/source-code-lookup-in-eclipse/
- OAuth 2.0 Authorization Framework RFC
Internet Engineering Task Force (IETF) D. Hardt, Ed.Request for Comments: 6749 MicrosoftObsoletes: 5 ...
- 向第一个 p 元素添加一个类
This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> &l ...
- [Functional Programming] mapReduce over Async operations and fanout results in Pair(rejected, resolved) (fanout, flip, mapReduce)
This post is similar to previous post. The difference is in this post, we are going to see how to ha ...