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()的,最后看 ...
随机推荐
- Vim的强大配置文件（一键配置）
转:https://blog.csdn.net/u010871058/article/details/54253774/ 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点 ...
- 在Intellij IDEA中添加JUnit单元测试
Intellij IDEA中添加JUnit单元测试 目录 Intellij IDEA中添加JUnit单元测试 下载jar包 在Intellij IDEA项目中添加jar包 下载插件并进行设置 创建存放 ...
- LeetCode-011-盛最多水的容器
盛最多水的容器 题目描述:给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...
- 学习c语言时对一些疑问的测试
#include<stdio.h>#include<string.h> int main(){/* 1 */// int a[3][3]={6,1,2,3,4,5};// in ...
- jmeter（二十八）利用beanshell进行多重断言
在接口测试中,我们对返回结果的正确性判断一般是基于响应报文的返回内容进行断言.但有些时候,按照正常的业务逻辑来说,一个请求返回的内容是多种不同的. 比如:用户注册功能,注册成功是正常的返回messag ...
- 一比一还原axios源码（五）—— 拦截器
上一篇,我们扩展了Axios,构建了一个Axios类,然后通过这个Axios工厂类,创建真正的axios实例.那么今天,我们来实现下Axios的拦截器也就是interceptors.我们来简单看下Ax ...
- Open Babel的安装与使用
技术背景 Open Babel是化学领域常用的一个文件格式转换工具,它可以支持xyz的坐标格式.SMILES表达式.InChI表达式和mol以及mol2等格式之间的互相转化.比如说,你只有一个甲烷的S ...
- RENIX板卡V2-100G系列工作模式速率切换——网络测试仪实操
本文主要介绍了RENIX板卡V2-100G系列工作模式速率切换相关操作.全文分为五部分内容.文章开头对V2-100G系列板卡进行了概述,之后分别详细介绍了100G工作模式.40G工作模式.25G工作模 ...
- Centos7 使用Docker安装rocket.chat聊天工具
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 下载安装 Rocket.Chat 目前最新的版本为 4.0.1,可以通过手动或者容器的方式安装.这里我推荐使用容器,部署过程会方便不少. 如果要用容 ...
- web服务器-nginx默认网站
web服务器-nginx默认网站 一 默认网站 server { listen 80; server_name localhost; location / { root html; index ind ...