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()的,最后看 ...
随机推荐
- 『德不孤』Pytest框架 — 5、Pytest失败重试
Pytest失败重试就是,在执行一次测试脚本时,如果一个测试用例执行结果失败了,则重新执行该测试用例. 前提: Pytest测试框架失败重试需要下载pytest-rerunfailures插件. 安装 ...
- Java线程池进阶
线程池是日常开发中常用的技术,使用也非常简单,不过想使用好线程池也不是件容易的事,开发者需要不断探索底层的实现原理,才能在不同的场景中选择合适的策略,最大程度发挥线程池的作用以及避免踩坑. 一.线程池 ...
- 基于Windows系统应用的权限维持
1.dll劫持 生成dll 通过msf将dll木马上传到目标应用程序的dll文件夹里面,然后通过msf来将木马dll名称和正常dll名称进行互换 远程开启监听,然后一旦目标机器的应用程序运行就会触发d ...
- [旧][Android] Retrofit 源码分析之 Retrofit 对象
备注 原发表于2016.04.27,资料已过时,仅作备份,谨慎参考 前言 在上一周学习了一下 Retrofit 的执行流程.接下来的文章要更为深入地学习 Retrofit 的各个类,这次我们先学习一下 ...
- 由浅入深---MyBatis的全局配置文件
从我开始接触代码,我就很怕写配置文件,一般的配置文件我都是直接从上一个项目复制到这个项目来改改,可能有部分同学也有我这种痛吧: 我目前一般的做法,先去找找例子(从网上,从github,从官网)之后再改 ...
- MyBatis 使用(XML版本)
一.MyBatis相关概念 对象 / 关系数据库映射(ORM) ORM全称Object/Relation Mapping:表示对象-关系映射的缩写 ORM完成⾯向对象的编程语⾔到关系数据库的映射.当O ...
- Python——序列与字符串
序列与字符串 一. 列表 列表是Python的内置可变序列,是包含若干元素的有序连续内存空间.同一列表元素的数据类型可以各不相同,可以分别为整数.实数.字符串等基本类型,也可以是列表.元组.字典.集合 ...
- JZ-034-第一个只出现一次的字符位置
第一个只出现一次的字符位置 题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). ...
- LeetCode-091-解码方法
解码方法 题目描述:一条包含字母 A-Z 的消息通过以下映射进行了 编码 : 'A' -> 1 'B' -> 2 ... 'Z' -> 26 要 解码 已编码的消息,所有数字必须基于 ...
- 自动化安装操作系统（Centos7+PXE+Cobbler+kickstart)
一.简介 PXE称作是一种引导方式而不是安装方式似乎更加准确,PXE(Pre-boot Execution Environment)是由Intel设计的协议,它可以使计算机通过网络启动,但是有一个前提 ...