jQuery--事件绑定|委派|切换
一、事件的绑定
1.事件的绑定介绍
事件绑定：
- bind(type,fn) 给当前对象绑定一个事件。例如：A.bind("click",fn);类似A.click(fn)
- unbind(type) 解绑bind事件
- one(type,fn) 给当前对象绑定一次事件
- on(type,fn) 提供绑定处理程序所需要的所有功能。完成3个方法的功能bond(),delegate()和live()
- off(events) 解绑
- trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger("submit"),类似A.submit();
- triggerHandler(type) 在每一个匹配的元素上出发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡
事件委派
- live(type,fn) 给一类对象绑定事件，之后动态添加的同样的成员也具有相同的事件。
- die(type) 解绑事件
事件切换
- hover(over,out) 简化版，鼠标的移入移出A.hover(fn(移入)，fn(移出))
- toggle(fn,fn,fn,...) 执行click事件，每点击一次执行一个fn
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 // <input id="h01" type="button" value="1只能点击一次，之后失效" />
10 $("#h01").one("click",function(){
11 alert("只能点一次哦");
12 });
13 // <input id="h02" type="button" value="2可以点击多次" />
14 //jquery中事件绑定是可以使用别名的
15 $("#h02").bind("click.a",function(){
16 alert("可以点多次哦111");
17 });
18 $("#h02").bind("click.b",function(){
19 alert("可以点多次哦222");
20 });
21 // <input id="h03" type="button" value="3解绑2" />
22 $("#h03").click(function(){
23 $("#h02").unbind("click.b");
24 });
25 // <input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />
26 $(".myClass").live("click",function(){
27 $("body").append("<input type='button' value='克隆人' class='myClass'/>");
28 });
29 // <input id="h05" type="button" value="5 解绑4"/>
30 $("#h05").click(function(){
31 $(".myClass").die("click");
32 });
33 });
34 </script>
35
36 </head>
37 <body>
38 <input id="h01" type="button" value="1只能点击一次，之后失效" />
39 <input id="h02" type="button" value="2可以点击多次" />
40 <input id="h03" type="button" value="3解绑2" />
41 <input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />
42 <input id="h05" type="button" value="5 解绑4"/>
43 </body>
44 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Insert title here</title>
6 <style type="text/css">
7 #e02{
8 border: 1px solid #000000;
9 height: 200px;
10 width: 200px;
11 }
12
13 </style>
14 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $("#e01").toggle(function(){
18 alert("抱树1");
19 },function() {
20 alert("抱树2");
21 });
22 $("#e02").hover(function() {
23 $("#divMsg").html("移入");
24 },function(){
25 $("#divMsg").html("移出");
26 })
27 });
28 </script>
29
30 </head>
31 <body>
32 <input id="e01" type="button" value="抱树" /><span id="textMsg"></span> <br/>
33 <hr/>
34 <div id="e02" ></div><span id="divMsg"></span> <br/>
35 </body>
36 </html>
jQuery--事件绑定|委派|切换的更多相关文章
- jQuery事件绑定与切换
一.事件绑定 1.标准方式 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit(); ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JQuery事件绑定，bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
- jQuery 事件绑定
在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用 bind() 方法来对匹配元素进行特定事件的绑定,bind() 方法的调用格式为:bind( type [, data] , fn ...
- jQuery事件绑定与常用事件
jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...
- jQuery事件绑定.on()简要概述及应用
原文地址:http://www.jquerycn.cn/a_5346 前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...
随机推荐
- 彻底明白Linux硬链接和软链接
[硬连接] 在Linux的文件系统中,保存在磁盘分区中的实际文件不管是什么类型系统都给它分配一个编号,称为索引节点号(Inode Index),这个索引节点用来标识这个文件,即这个索引节点就代表了这个 ...
- 字符串压缩（一）之ZSTD
前言 最近项目上有大量的字符串数据需要存储到内存,并且需要储存至一定时间,于是自然而然的想到了使用字符串压缩算法对"源串"进行压缩存储.由此触发了对一些优秀压缩算法的调研. 字符串 ...
- mybatis和spring的xml基本配置
mybatis 导入依赖环境 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybat ...
- C#?和??运算符以及合并条件表达式
最近项目中,常常碰到这个?和??这两个操作符,之前说得不够详细,趁着周末补全来,希望能够给大家带来帮助. (一)?操作符 我们知道值类型是不肯能为空的,它总是包含值的本身,不会为NULL,这估计也是值 ...
- linux 下面启动nginx 和关闭nginx
linux 下面启动nginx 和关闭nginx, 查看linux 开放的所有端口netstat -ntpl,重启服务命令 :service network restart 1 进入到安装的目录里面 ...
- 【译】C# 11 特性的早期预览
原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...
- golang程序设计：Go middleware中间件以及Gin 中间件分析
先从业务开发角度出发,来逐渐引出中间件. 一.刚开始时业务开发 开始业务开发时,业务需求比较少. 当我们最开始进行业务开发时,需求不是很多. 第一个需求产是品向大家打声招呼:"hello w ...
- html续篇及初识爬虫
今日内容概要 form表单 requests模块 可以模拟浏览器朝服务端发送各式各样的请求 cookie与session requests模块小案例(网站的基本防爬措施) 今日内容详细 form表单 ...
- Java中常用的加密方式(附多个工具类)
一.Java常用加密方式 Base64加密算法(编码方式) MD5加密(消息摘要算法,验证信息完整性) 对称加密算法 非对称加密算法 数字签名算法 数字证书 二.分类按加密算法是否需要key被分为两类 ...
- Chapter06 数组（Array）
目录 Chapter06 数组 6.1 数组的认识 6.2 数组的使用 使用方式1 - 动态初始化 使用方式2 - 动态初始化 使用方法3 - 静态初始化 6.3 数组使用的注意事项和细节 6.4 数 ...