jQuery第五章事件

于 2020-10-04 20:31:17 发布
阅读量135 收藏
点赞数
分类专栏： jQuery内容 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/starry__sty/article/details/108922207
版权
这篇博客详细介绍了jQuery中的事件处理，包括绑定事件的bind方法、去除绑定的unbind()、各种鼠标和表单事件如click、mouseover、focus等，还讨论了事件冒泡与默认行为的阻止方法、事件对象event的属性，以及this和event.target的区别。
摘要由CSDN通过智能技术生成

1:绑定事件方法:

bind(事件，函数) 元素绑定事件
**绑定事件方法的优点就是可以绑定多个事件，可以同时处理

<body>
		<button>点击</button>
	</body>
	<script type="text/javascript">
//		$('button').click(function(){
//			alert(12312)
//		})
//		$('button').mouseover(function(){
//			alert(345534)
//		})

//		$('button').bind('click',function(){
//			alert('哈哈哈')
//		})

//		$('button').bind('click mouseover',function(){
//			alert('哈哈哈')
//		})
		
//		$('button').bind({
//			'click':function(){
//				alert('哈哈哈哈')
//			},
//			'mouseover':function(){
//				alert('呵呵呵呵')
//			}
//		})
		
//		$('button').bind('click',a)
//		$('button').bind('mouseover',b)
//		function a(){
//			alert('哈哈哈哈')
//		}
//		function b(){
//			alert('呵呵呵呵')
//		}
		
	</script>

2:去除绑定方法： unbind()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button>点击</button>
	</body>
	<script type="text/javascript">
		$('button').bind('click',a)
		$('button').bind('mouseover',b)
		function a(){
			alert('哈哈哈哈')
		}
		function b(){
			alert('呵呵呵呵')
		}
		$('button').unbind('click')
		
		
		
//		$('button').bind({
//			'click':function(){
//				alert('哈哈哈哈')
//			},
//			'mouseover':function(){
//				alert('呵呵呵呵')
//			}
//		})
//		$('button').unbind('click')
	</script>
</html>

3：其他事件方法：
------------------------------鼠标事件----------------------------------------------------------

click() 点击事件
dblclick() 双击
mousedown() 鼠标按下
mouseup() 鼠标弹起
mouseover() 鼠标移入
他们俩个的区别在于：over和out事件碰到子元素也会触发事件，enter和leave不会
mouseout() 鼠标移出
mouseenter() 鼠标移入
mouseleave() 鼠标移出
mousemove() 鼠标移入移出

------------------------------滚动事件----------------------------------------------------------

scroll() 滚动

------------------------------表单事件----------------------------------------------------------

focus() 获取焦点
blur() 失去焦点
focusin() 获取焦点
focusout() 失去焦点
submit() 提交
select() 选中文本
change() 改变文本

------------------------------浏览器事件-------------------------------------------------------

resize() 缩放浏览器

------------------------------键盘事件----------------------------------------------------------

keydown() 键盘按下
keyup() 键盘弹起
keypress() 键盘简码

4：复合事件

hover(函数，函数)
举例：
hover(function(){},function(){})
事件中的第一个函数是移入是做的事情，后面函数里面是移出的时候做的事情

5:如果大家想要用废弃的方法在新版本里面，可以下载 jquery-migrate.js 文件，来向下兼容已被删除掉的方法
6:事件委托方法

	on(事件，要委托的元素，函数)
	one()		只能执行一次事件的方法
	live()		事件委托（在1.9版本被删除）
	die()		删除事件委托（在1.9版本被删除）

7：事件命名空间

举例：
$('li:eq(1)').bind('click.b',f2);
function f2(){
	alert('我是第2个li')
}
$('li:eq(0)').unbind('click.a')

8：事件模拟操作

trigger(事件) 模拟事件方法(在页面刷新的时候模拟执行一次)
trigger()可以传参（字符串，对象，数组）
triggerHandler()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button>点击</button>
	</body>
	<script type="text/javascript">
//		$('button').click(function(){
//			alert('我被点击了')
//		}).trigger('click')

//		$('button').click(function(e,data1,data2){ 
//			alert(data1.a+',' +data2[1]); 
//		}).trigger('click',[{'a' :'1','b':'2'},['123','456']]);
	</script>
</html>

9:阻止事件冒泡和默认行为

event.stopPropagation(); 阻止事件冒泡方法
event.preventDefault(); 阻 止默 认 行为 ( 表 单提 交 )
return false 阻 止默 认 行为

阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 500px;
				height: 500px;
				background: red;
			}
			p{
				width: 300px;
				height: 300px;
				background: yellow;
			}
			span{
				display: block;
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<p>
				<span>
					<button>点击</button>
				</span>
			</p>
		</div>
	</body>
	<script type="text/javascript">
		$('button').click(function(e){
			alert('我是按钮');
			e.stopPropagation();
		})
		$('span').click(function(){
			alert('我是span')
		})
		$('p').click(function(){
			alert('我是p')
		})
		$('div').click(function(){
			alert('我是div')
		})
	</script>
</html>

阻止默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="" method="post">
			
			<input type="submit" value="点击"/>
		</form>
		<a href="10事件命名空间.html">点击1</a>
	</body>
	<script type="text/javascript">
		$('input').click(function(event){
			event.preventDefault();
		})
		$('a').click(function(event){
			return false;
		})
	</script>
</html>

10:事件对象 event

对象属性：
event.target 事件源 event.srcElement（IE事件源写法）
event.type 事件类型
event.pageX/Y 鼠标在页面上的坐标位置
event.clientX/Y 鼠标在可视窗口上的坐标位置
event.screenX/Y 鼠标在屏幕上的坐标位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				margin: 100px;
			}
			
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="height: 2000px;">
		<div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).click(function(e){
//			console.log(e.pageX+','+e.pageY)
//			console.log(e.screenX+','+e.screenY)
			console.log(e.clientX+','+e.clientY)
		})
	</script>
</html>

11：this和event.target的区别

this指向事件前对象
event.target指向事件源
starry__sty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery第五章 jQuery函数
Lv Zejiang
08-30 193
JavaScript自我学习路线jQuery函数一、val二、text三、attr测试用例一 jQuery函数 jQuery常用函数： val text attr remove empty append html each 一、val 操作数组中DOM对象的value属性 语法格式 // 无参调用形式，读取数组中第一个DOM对象的value属性值 $(选择器).val() // 有参调用形式，对数组中所有DOM对象的value属性值进行统一赋值 $(选择器).val(值) 二、text 操作数
jQuery事件对象的属性和方法
weixin_34161083的博客
09-09 105
jQuery事件对象的属性和方法 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY：获取鼠标当前...
Jquery的事件对象属性
weixin_44540482的博客
07-28 115
事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 (&quot;a&quot;).click(function(event)alert(event.type);//&quot;click&quot;事件);event.pageX和event.pageY：获取鼠标当前相对于页面...
jQuery第五章知识点
suixinCaesar的博客
07-19 606
1.jQuery是一个优秀的JavaScript库，使用它可大大提高Web客户端的开发效率 2.要使用jQuery的功能，需要首先使用jQuery库文件 3.jQuery代码中常见的元素包括工厂函数，选择器和方法 4.$（Doument）.ready（）与window.onload的使用场合类似，但有差异 5.jQuery程序代码的特色：包含$符号和连綴操作 6.可以将DOM对象转换成j...
jQuery第四章 jQuery事件
Lv Zejiang
08-30 150
JavaScript自我学习路线jQuery事件 jQuery事件 链接: JavaScript第七章 事件 语法格式 $(选择器).事件名称(事件处理函数); $(选择器)：定位DOM对象，DOM对象可以有多个，这些DOM对象都绑定事件了 事件名称：是JS事件中去掉on后的内容，例如JS中的onclick的事件名称是click 事件处理函数：就是function，当事件发生时，执行这个函数的内容 例如： 为页面中所有的button绑定onclick，并关联处理函数function1 $(“butt
JQuery第七章上机练习和课后作业
08-08
**jQuery第七章上机练习与课后作业详解** 在学习jQuery的过程中，第七章通常涵盖了更高级和实用的技术，包括DOM操作、事件处理、动画效果以及AJAX交互等。本篇文章将详细探讨这些知识点，旨在帮助前端开发者提升...
JS/JQuery-第5章上机练习.zip
04-20
在"JS/JQuery-第5章上机练习"中，我们可以推测这章主要围绕以下几个主题展开： 1. **DOM遍历**：学习如何使用JQuery遍历DOM树，获取或修改元素及其子元素的属性。 2. **事件处理**：深入理解JQuery中的事件模型，...
JQuery 第五章 事件和动画 上机+课后
qq_36074043的博客
04-26 3029
sj1.html * { margin: 0px; padding: 0px; font-size: 12px; } #nav .navsBox { width: 160px; } #nav .navsBox .firstNav { height: 45px; line-height: 45px; background-color: #EBEBEB; border
锋利的jquery第五章例子
12-12
《锋利的jQuery第五章实例解析》 在深入探讨这些实例之前，首先理解jQuery的核心概念是至关重要的。jQuery是一款高效、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在jQuery的...
jQuery事件对象的属性和方法详解
12-11
jQuery事件对象的属性和方法，供大家参考，具体内容如下 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标 通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 e
第5章 jQuery之事件
行云流水
03-07 386
我们可以使用jQuery为页面上的元素动态的绑定一个事件，也可以动态的解绑一个事件 5.1 动态绑定与动态解绑 第1组 bind  (绑定,不具有事件委托) //使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成 $('.button').bind('click',function(){ alert(“事件不委托”); }); 注意：bind只能绑定已经存在的元素，对于
jQuery第二章选择器
涛涛的博客
09-23 159
标题 1：基础选择器 id # class . 标签 div * 通配符 群组 #box,p css() 一个值的时候是找这个元素的值，两个值的时候是设置样式 举例 找元素的值： alert($('p').css('color')) 举例 设置元素的样式： $('#txt').css('color','red'); size() 返回的元素个数 举例： alert($('p').size()) <!DOCTYPE html> <html> &l
第五章 初始jQuery
liaohuanmei的博客
04-20 1013
1、什么是jQueryjQuery是JavaScript的程序库之一 ，它是实现Javascript对象和实用函数的封装， 使用它可大大提高Web客户端的开发效率，减少了代码量，能使页面在各个浏览器保持统一的显示效果，不存在浏览器兼容问题。Javascript是一种面向web的脚本语言，大部分网站都是使用了Javascript。1）访问和操作DOM元素2）控制页面样式3）对页面事件的处理4）方便的...
jQuery第五章知识梳理
qq_45683093的博客
11-10 160
jQuery第五章操作样式
l_jia_ming的博客
12-02 258
jQuery学习笔记
使用jQuery快速高效制作网页交互特效 第五章初始jQuery
cb19980902的博客
04-23 2064
1.配置jQuery环境  (1)获取jQuery的版本  (2)jQuery库类型说明     jquery-1.版本号.js(开发板)        主要用于测试,学习和开发     jquery-1.版本号.min.js(发布版)    主要用于发布的产品和项目  (3)jQuery环境配置  (4)在页面中引入jQuery2.jQuery语法  jQuery代码:$(document).r...
JavaScript+jQuery第4章：CSS进阶与元素定位
第4章是关于CSS进阶技能的学习，旨在提升开发者在实际项目中灵活运用JavaScript和jQuery与CSS进行高效页面定制的能力，理解和掌握布局、定位和动态效果的实现策略。无论是对于初学者还是经验丰富的开发人员，这部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值