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()的,最后看 ...
随机推荐
- Virtual Box 中的虚拟系统无法调整分辨率（无法自适应窗口大小）
关于 Virtual Box 中安装好虚拟机后无法调整分辨率,即无法随 vbox 窗口大小自动调整内部虚拟机的屏幕. 网上找了百度了一遍,很多方法并不凑效,好在最后解决了,现将过程记录,以飨来者. 1 ...
- vs2022 如何让.net库文件参与程序调试【可以.net库文件的源代码中设置断点，单步跟踪】
由于.net core 是开源的.所以可以让.net库文件参与程序调试.具体vs2022配置如下 1.设置VS2022 加载程序数据文件(.pdb俗称符号文件) 1)选择工具>选项>调试& ...
- 【C#基础知识】C#控制台程序入口函数 Main(string[] args) 参数详解
测试环境vs2019+.net5.0 请看 :https://cloud.tencent.com/developer/article/1507934 本测试环境vs2022+.net6.0 +wind ...
- hdfs刷新节点失败，未显示Refresh nodes successful
使用命令:hdfs dfsadmin -refreshNodes 没有显示Refresh nodes successful,而是:refreshNodes: /opt/module/hadoop-2. ...
- lsof、tcpdump和wireshark
lsof:https://www.jianshu.com/p/a3aa6b01b2e1 tcpdump:https://linux.cn/article-10191-1.html wireshark: ...
- vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002
出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R ...
- C# 爬取图片
网络收集整理 爬取图片 引用AngleSharp NuGet 包 using AngleSharp; using System; using System.Collections.Generic; ...
- （第二章第三部分）TensorFlow框架之读取二进制数据
系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html (第二章第二部分)Tens ...
- java复习面向对象（二）
java复习面向对象(二) 1.static关键字 举例图片 静态变量 使用static修饰的成员变量是静态变量 如果一个成员变量使用了关键字static,那么这个变量不属于对象自己,而属于所在的类多 ...
- Java应用层数据链路追踪（附优雅打印日志姿势）
我是3y,一年CRUD经验用十年的markdown程序员常年被誉为优质八股文选手 今天来聊些大家都用得上的东西:数据链路追踪.之前引入了系统的监控来快速定位应用操作系统上的问题,而业务问题呢?在这篇 ...