jQuery 事件解绑、事件触发

最新推荐文章于 2022-12-13 12:05:04 发布

头上三尺很有神

最新推荐文章于 2022-12-13 12:05:04 发布

阅读量205

点赞数 1

分类专栏：前端 JQuery 文章标签： javascript vue java css js

本文链接：https://blog.csdn.net/weixin_45060872/article/details/107121316

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

JQuery

7 篇文章 0 订阅

订阅专栏

jQuery的事件

jQuery的事件发展历程
原生的js给元素注册多个同名事件那么后面的会覆盖掉前面

jQuery给元素注册点击事件可以注册多个，jQuery注册事件是对原生js注册事件的一个加强
1.事件简单注册
不能同时注册事件而且不能动态注册事件

 $("div").click(function(){
		console.log("我是点击事件");
 })
			
$("div").mouseenter(function(){
		console.log("我是鼠标移入事件");
})

2.bind方式注册事件
支持同时注册事件但是不支持动态注册
可以注册多个事件
给bind方法传入一个对象每个事件给不同的事件处理函数各干各的事

$("div").bind("click mouseenter",function(){
		console.log(111);
	 })

3.delegate 注册委托事件

原理就是事件冒泡触发子元素的相关事件子元素没有这个事件那么就会往上找找到body有就会触发
支持同时注册而且也支持动态注册

$("div").bind({
	click:function(){
		console.log("嘻嘻嘻");
	},
				
	mouseenter:function(){
		console.log("hahaha");
	}
 })

delegate方法已经不再使用了在老项目里面可能会有一些这种写法

$("body").delegate("div,span",{
		click:function(){
			console.log("嘻嘻嘻");
		},
				
		mouseenter:function(){
			console.log("hahaha");
		}
 })

4.on来注册事件 是在jQuery1/7版本以后统一的事件处理的方法

on方法的简单注册
简单注册支持同时注册多个事件但是不支持动态注册

 $("div").on("click",function(){
		console.log(111);
	})
			
//同时注册多个事件
	 $("div").on({
		click:function(){
		console.log("xixixi");
	},
				
	mouseenter:function(){
		console.log("hahaha");
	}
})

on的委托注册
指的是给元素绑定代理事件这里触发事件必须是它内部的子元素才可以触发而且支持动态绑定
参数1 events 必填项绑定的事件类型(事件名称) 可以写多个事件中间使用空格隔开
参数2 selector选择器选填事件的触发源(谁来执行这个事件) 如果不填那么就默认由body自己触发
参数3 data 选填传递给事件处理函数的数据在事件触发的时候使用 event.data 就可以获取（一般情况下不填）
参数4 事件处理函数必填
query在事件中修改了this的指向指向触发事件的那一个元素方便使用

		$("body").on("click","div, span",function(){
			   console.log("我是单击事件");
			   
			   //jquery在事件中修改了this的指向 指向触发事件的那一个元素 方便使用
			   console.log(this);
		   })

事件解绑

原生js
注册事件

document.getElementById("one").onclick=function(){执行的代码}

解绑事件

document.getElementById("one").onclick=null;

仅适用谷歌火狐
注册事件

document.getElementById("one").addEventListener();

解绑事件

document.getElementById("one").removeEventListener();

IE
注册事件

document.getElementById("one").attachEvent();

解绑事件

document.getElementById("one").detachEvent();

jquery
注册事件

$("#one").on("click",function(){执行的代码}

解绑事件

jquery对象.off();

什么参数都不给就是默认解绑所有事件

jquery对象.off("事件名");

给参数就说明解绑指定的事件

$("#btn1").on("click",function(){
					//使用委托注册 给div注册点击事件
					// $("body").on("click","div",aaa);
					
					//简单注册
					$("#one").on("click",function(){
						console.log(111);
					})
				})
				
				function aaa(){
					console.log("我是单击事件");
				}
				
				
				$("#btn2").on("click",function(){
					//使用委托注册 给div注册解绑事件
					// $("body").off("click","div",aaa);
					
					//简单注册
					$("#one").off(); //什么参数都不给 就是默认解绑所有事件
					$("#one").off("click"); //给参数 就说明解绑指定的事件 
				})
			
		})

事件触发

使用trigger来触发事件而且trigger不仅可以触发标准事件还可以触发自定义事件

jquery对象.trigger("事件名");

事件对象

在原生的js里面的事件对象

事件对象是指在每一个事件被触发时都会有一个对象来记录这个事件被触发的时候的一些信息包括三大坐标系

原生里面的三大坐标系：
screenX/screenY

事件触发点到屏幕左上角的距离
clientX/clientY

事件触发点到页面可视区域的距离
pageX/pageY

事件触发点到页面左上角的距离(定位坐标)

jquery里面的事件对象
jQuery里面的事件对象跟原生的内容一样只是对原生js的事件对象做了封装解决了兼容性问题
阻止事件的默认行为

e.preventDefault();

阻止事件冒泡

e.stopPropagation();

既可以阻止事件冒泡也可以阻止事件的默认行为

return false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="按钮1" />
		<input type="button" name="" id="btn2" value="按钮2" />
		<div id="one"></div>
	</body>
	<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//1.给div注册点击事件
			$("#one").on("click",function(){
				alert("单击")
			})
			
			//2.现在不想点击div 但是就是要在某个特定的时间点去触发div点击事件
			//可以使用trigger来触发事件 而且trigger不仅可以触发标准事件 还可以触发自定义事件
			var i=0;
			$("#btn1").on("click",function(){
				//当i=3的时候 触发盒子的点击事件
				i++;
				
				if(i>=3){
					//触发div的点击事件
					// $('#one').click();
					
					$('#one').trigger("click");
				}
			})
			
			
			//3.创建一个自定义事件
			$("#one").on("sb",function(){
				console.log("随便");
			})
			
			
			$("#btn2").on("click",function(){
				var res=confirm("要触发点击事件吗")
				
				if(res){
					$('#one').trigger("sb");
				}
			})
		})
	</script>
</html>

头上三尺很有神

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件解绑、事件触发

jQuery的事件jQuery的事件事件解绑事件触发jQuery的事件jQuery的事件发展历程原生的js给元素注册多个同名事件那么后面的会覆盖掉前面jQuery给元素注册点击事件可以注册多个，jQuery注册事件是对原生js注册事件的一个加强1.事件简单注册不能同时注册事件而且不能动态注册事件 $("div").click(function(){ console.log("我是点击事件"); }) $("div").mouseenter(function(){ co
复制链接

扫一扫

专栏目录