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()的,最后看 ...
随机推荐
- Aesop_secret的writeup
大家好,这次我为大家带来的是攻防世界misc部分Aesop_secret的writeup. 先下载附件,是一个压缩包,紧接着解压,发现一个gif文件.用浏览器打开,注意到这个gif文件播放时每一 ...
- 绘制地图其实并不难！如何绘制地图？看看Smartbi的制作方法
数据地图是一种图形化的数据资产管理工具,它提供了多层次的图形化展现,并具备各种力度的控制能力,满足业务使用.数据管理.开发运维不同应用场景的图形查询和辅助分析需求.长期以来,很多职场人士都希望能在自己 ...
- 推荐几款顶级的数据可视化及大数据分析BI工具
如今,有大量强大的可视化工具可用于表达想法.可视化数据.向客户和全球社区分享重要的分析结果.现在大大小小的企业都可以利用商业智能工具来理解复杂的大数据. 这些解决方案可以收集,分析这些数据并将其转换为 ...
- 案例一：shell脚本指定日期减去一天
如果只减去一天的话,直接写就可以了. #date -d"yesterday 20150401" +%Y%m%d 如果要减去几天,还可以这样写,如果用负数是往前数, #date -d ...
- Java基础--集合解析-ArrayList
1.ArrayList中添加,获取,删除元素: 2.ArrayList中是否包含某个元素: 3.ArrayList中根据索引将元素数值改变(替换): 4.ArrayList中查看(判断)元素的索引: ...
- layui模板注册表单
今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...
- WPS:将题注与章节连接起来
右键图片添加题注,在题注设置中勾选题注编号中的包含章节编号
- JAVA——转义字符
目录 1.Java转义字符 2.Java中的注释 2.1Java 中的注释类型 2.2文档注释 3.Java代码规范 4.Java开发注意事项和细节说明 1.Java转义字符 在控制台,输入 tab ...
- Linux swap分区操作
swap交换分区是系统RAM的补充,swap 分区支持虚拟内存.当没有足够的 RAM 保存系统处理的数据时,会将数据写入 swap 分区,当系统缺乏 swap 空间时,内核会因 RAM 内存耗尽而终止 ...
- Navicat v15 破解
特别注意: 1.断网,否则在安装过程中会失败 2.关闭防火墙及杀毒软件 3.选择对应版本:mysql版就选择mysql 4.如果出现 就卸载,删除注册表,重新安装,出现rsa public key n ...