jQuery--事件

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量406 收藏 1
点赞数
分类专栏： 前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_GIA/article/details/54844739
版权

事件

一、常见事件



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		#e02{
			border: 1px solid #000000;
  			height: 200px;
 			width: 200px;
		}
		
	</style>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#e01").blur(function(){
				$("#textMsg").html("文本框失去焦点：blur");
			}).focus(function(){
				$("#textMsg").html("文本框获得焦点：focus");
			}).keydown(function(){
				$("#textMsg").append("键盘按下：keydown");
			}).keypress(function(event){
				$("#textMsg").append("键盘按：keypress");
			}).keyup(function(){
				$("#textMsg").append("键盘弹起：keyup");
			}).select(function(event){
				//支持谷歌
				var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
				$("#textMsg").html("文本内容被选中：select ， " + sub);
			});
			
			var i = 0;
			$("#e02").mouseover(function(){
				$("#divMsg").html("鼠标移上：mouseover");
			}).mousemove(function(){
				$("#divMsg").html("鼠标移动：mousemove , " + i++ );
			}).mouseout(function(){
				$("#divMsg").html("鼠标移出：mouseout");
			}).mousedown(function(){
				$("#divMsg").html("鼠标按下：mousedown");
			}).mouseup(function(){
				$("#divMsg").html("鼠标弹起：mouseup");
			});
			
			$("#e03").click(function(){
				$("#buttonMsg").html("单击：click");
			}).dblclick(function(){
				$("#buttonMsg").html("双击：dblclick");
			});
			
		});
		
		
		
		
		
	</script>
	
</head>
<body>
	<input id="e01" type="text" /><span id="textMsg"></span> <br/>
	<hr/>
	<div id="e02" ></div><span id="divMsg"></span> <br/>
	<hr/>
	<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>


l  jQuery 提供额外的事件，用于完善javascript缺失的

l  focusin 和 focusout

       focusin获得焦点。js focus。

              focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

       focusout失去焦点。js blur。

              focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。


<script type="text/javascript">
		$(document).ready(function(){
			//js focus 父元素【不能检测】到子元素获得焦点
			/*
			$("#outerDiv").focus(function(){
				alert("outer");
			});
			*/
			
			// jquery focusin 父元素【可以检测】到子元素获得焦点
			$("#outerDiv").focusin(function(){
				alert("outer");
			});
		});
		
		
	</script>
	
</head>
<body>
	<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
		<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
	</div>
	
	<br/>
	<span id="showSpan"></span>
		
</body>


l  mouseenter 和 mouseleave

       mouseenter鼠标移入。jsmouseover

              与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

 

       mouseleave鼠标移出。jsmouseout

              与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。


<script type="text/javascript">
		$(document).ready(function(){
			var i= 0; 
			//js  mouseover  当鼠标在父元素和子元素 之间穿越时，【触发】父元素的事件。
			/*
			$("#outerDiv").mouseover(function(){
				$("#showSpan").html(i++);
			});
			*/
			
			//jquery  mouseenter  当鼠标在父元素和子元素 之间穿越时，【不触发】父元素的事件。
			$("#outerDiv").mouseenter(function(){
				$("#showSpan").html(i++);
			});
			
		});
		
		
	</script>
	
</head>
<body>
	<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
		<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
	</div>
	
	<br/>
	<span id="showSpan"></span>
		
</body>

二、页面加载


l  方式1：标准api

$(document).ready(function(){

});
等效
jQuery(document).ready( fn );


l  方式2：简化版

$(function(){
});
等效
jQuery(function(){
});




<script type="text/javascript">
		// jquery 页面加载 可以使用多次
		$(function(){
			alert("aaaa");
		});
		$(function(){
			alert("bbbb");
		});
	
		// js  只能执行一个，后面的覆盖前面的
		window.onload = function(){
			alert("1111");
		};
		window.onload = function(){
			alert("2222");
		};
	</script>

三、事件绑定

1、处理


bind(type ,fn)  给当前对象绑定一个事件。例如：A.bind("click", fn ); 类型：A.click( fn);

unbind(type ) 解绑bind绑定事件

 

one(type ,fn ) 给当前对象绑定一次事件。

-----------------------------------------

on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().

off(events) 解绑

 

trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger("submit")  ,类似A.submit();

triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。



2、委派


live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。

die(type) 解绑事件


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
//	<input id="h01" type="button" value="1只能点击一次，之后失效" /> 
			$("#h01").one("click",function(){
				alert("你只能看到我一次");
			});
//	<input id="h02" type="button" value="2可以点击多次" />
			//jQuery 事件别名，格式：事件.别名
			$("#h02").bind("click.a",function(){
				alert("每次都是你111");
			});
			$("#h02").bind("click.b",function(){
				alert("怎么还是你222");
			});
//	<input id="h03" type="button" value="3解绑2" /> 
			$("#h03").click(function(){
				$("#h02").unbind("click.b");
			});
//	<input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />
			$(".myClass").live("click",function(){
				$("body").append("<input type='button' class='myClass' />");
			});
//	<input id="h05" type="button" value="5 解绑4"/> 
			$("#h05").click(function(){
				$(".myClass").die("click");
			});
		});
	</script>
	
</head>
<body>
	<input id="h01" type="button" value="1只能点击一次，之后失效" /> 
	<input id="h02" type="button" value="2可以点击多次" /> 
	<input id="h03" type="button" value="3解绑2" /> 
	<input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" /> 
	<input id="h05" type="button" value="5 解绑4"/> 
</body>
</html>

3、切换


hover(over , out)

       简化版，鼠标移入和移出  ，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn, fn )

toggle( fn , fn , fn ,...) 执行click事件，每点击一次执行一个fn


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		#e02{
			border: 1px solid #000000;
  			height: 200px;
 			width: 200px;
		}
		
	</style>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#e01").toggle(function(){
				alert("报数：1");
			}, function(){
				alert("报数：2");
			});
			
			$("#e02").hover(function(){
				$("#divMsg").html("over");
			} , function(){
				$("#divMsg").html("out");
			});
		});
	</script>
	
</head>
<body>
	<input id="e01" type="button" value="点我呀 " /><span id="textMsg"></span> <br/>
	<hr/>
	<div id="e02" ></div><span id="divMsg"></span> <br/>
</body>
</html>


我可能是个假开发
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery - 3.6.0
05-04
它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式 本资源包含jQuery-3.6.0...
jquery-migrate3.4版本
05-17
在jQuery 3.x中，一些过时或不推荐使用的API被移除，如`.data()`的旧实现、`.live()`事件处理和`.browser`对象等。Migrate 3.4.0为这些移除的功能提供临时支持，以便于迁移。 4. **浏览器兼容性**： 虽然现代...
js给多个具有相同class的元素绑定同一个事件或者样式
热门推荐
卫可冬的博客
12-23 1万+
<button class="btn1">month1</button> <button class="btn1">month2</button> <button class="btn1">month3</button> 若要给上面3个都具有btn1的class的按钮，添加同样的点击事件，则如下操作： $(".btn1")....
jQuery事件绑定（处理，委派，切换）
dly的博客
12-22 1240
jQuery事件绑定（处理，委派，切换）事件处理bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind(“click”, fn ); 类型：A.click( fn ); unbind(type ) 解绑bind绑定事件 one(type ,fn ) 给当前对象绑定一次事件。 on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind()
jQuery-键盘事件
廖若星辰-LTY
08-28 1306
JavaScript的键盘事件主要分为keypress、keydown和keyup三种状态。 keydown- 键按下的过程 keypress - 键被按下 keyup- 键被松开 首先实现键盘事件最主要的两点就是：1.我们要给页面的哪个元素绑定键盘事件；2.我们要给该元素绑定键盘上的哪个键。 要给哪个元素绑定我们就先获取到这个页面元素即可（可通过任一选择器方式获取到它）； 要绑定哪个键我们就需要先知道该键的ASCII码值是多少，这里不知道时可以百度搜索也可以直接用代码获取到该键的ASCII码..
jQuery--下载方法
IT利刃出鞘的博客
10-29 1438
下载 其他网址 jquery下载所有版本（实时更新）jQuery 所有版本的 CDN 和下载地址（实时更新）-歪脖网jQuery下载和安装详细教程_柯晓楠-CSDN博客 简介 jquery-2.0以上版本不再支持IE 6/7/8。 下载地址 国内第三方（很快）：https://www.jq22.com/jquery/jquery-3.5.1.zip 官网（很慢）：https://jquery.com/ CDN网址 国内（速度快） 字节跳动：https://s3.pstatp
jQuery---解除事件
Philo的博客
01-26 5245
jQuery—解除事件 常见的解除事件有三种，往往取决与你绑定事件所用的关键字： 举例1： //绑定事件，使用id选择器给btn1绑定点击事件 $("#btn1").on("click",function(){ console.log("点击事件") }).mouseenter(function(){ console.log("鼠标聚焦事件") }) //点击第二个按钮，解除第一个按钮事件 $("#btn2").on("click",function()
jQuery---绑定事件
Philo的博客
01-23 7269
js—绑定事件 文章目录一、最常用方法二、bind函数三、on函数四、delegate函数 一、最常用方法 $(“元素选择器”).事件名称(匿名函数) 举例1： //这里的button为元素选择器，click为鼠标点击事件 $("button").click(function(){ //函数内容 }) 举例2： //这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件 $("#btn1").mouseenter(function(){
jquery-contextmenu插件
qq_46266925的博客
01-25 1063
右键菜单插件:jquery-contextmenu使用
jquery-layout
湛庐无方
08-26 4612
jquery-layout.js
jquery-migrate.min.js兼容jQuery版本
心若向阳 无谓悲伤
07-13 5173
一、情形描述 已知live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。 你需要在已引用jquery-2.1.1.js的页面中使用live() ，那么肯定是无效的 1、代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1011
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery-ui.css、jquery-ui.js下载
11-05
例如，要创建一个对话框，只需简单调用`.dialog()`方法，jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样，例如： 1. **Dialogs** - 提供模态和非模态对话框，用于展示信息、警告或...
jquery-3.4.1.zip
01-11
在实际开发中，jQuery提供了丰富的选择器、遍历方法、DOM操作、事件处理、AJAX交互等接口，使得编写JavaScript代码变得简单直观。例如，使用`$()`函数可以快速选取DOM元素，`$(document).ready()`用于在页面加载完成...
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
jQuery的核心特性包括选择器、DOM操作、事件处理、动画效果以及Ajax操作。选择器是jQuery的精髓，它简化了JavaScript中获取DOM元素的方式，如"$()"函数可以轻松选取HTML元素。DOM操作则提供了一整套方法，如$("#id")...
JS中的常用事件
hongcaixia的博客
11-27 4729
常用事件 鼠标移动事件  onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定  onmouseover : 鼠标悬停事件 鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生 this: 把this写在那个标签里面就代表那个标签对象 this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
BootStrap容器介绍
hongcaixia的博客
04-21 4652
BootStrap容器介绍布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div> .container-fluid 类用于 100% 宽
文档对象模型DOM概述及DOM树
hongcaixia的博客
11-28 3291
DOM技术 1.Dom概述？ * 什么是DOM？  docuemnt object model 文档对象模型 * 它的作用？   重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目 * 分类？    Core DOM :   定义了一套标准的针对任何结构化文档的对象  XML  DOM :   定义了一套标准的针对 XML 文档的对象  HTML DOM :   定义
jQuery--文档处理
hongcaixia的博客
02-02 3290
文档处理 1、内部插入 A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）                      ....                      A.prepend(B) 将B插入到A的内部前面                                    ....        --------
jquery-signalr
12-19
jquery-signalr 是一个用于实时通信的 JavaScript 库，它建立在 ASP.NET SignalR 框架之上。它允许开发者使用简单的 API 来实现客户端和服务器端之间的实时双向通信。 使用 jquery-signalr，开发者可以轻松地创建基于事件的实时通信应用程序，无需担心底层的传输细节。它支持多种传输方式，包括 WebSockets、Server-Sent Events（SSE）和长轮询（long polling），以确保在各种环境下都能实现可靠的实时通信。 该库提供了一组简单而强大的方法和事件来处理连接管理、发送和接收消息等功能。开发者可以使用它来创建聊天应用、实时数据更新应用、在线游戏、实时监控系统等各种实时应用程序，而无需深入了解底层通信协议和技术。 jquery-signalr 还提供了与 jquery 库的集成，使得在现有的项目中使用它变得更加容易。它提供了一套符合 jquery 风格的 API，使得开发者可以利用熟悉的 jquery 方法和事件来处理实时通信的逻辑。 总之，jquery-signalr 是一个方便、强大且易于使用的库，它使得实时通信应用程序的开发变得简单而高效。它的灵活性和可扩展性使得它成为了构建现代 Web 应用程序中不可或缺的工具之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值