JQuery 事件

最新推荐文章于 2023-01-30 17:08:25 发布

每天都有进步

最新推荐文章于 2023-01-30 17:08:25 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_37141881/article/details/53991695

HTML5 专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了jQuery中的各种事件处理方式，包括常用事件、事件绑定与解绑、自定义事件等，并通过实例展示了事件冒泡和事件目标的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-2.2.4.min.js"></script>
		<script>
			$(document).ready(function() {
				//---jQuery常用事件----
				$('#bt1').click(function() {
					$(this).hide();
				});
				$('#bt2').dblclick(function() {
					$(this).hide();
				});
				$('#bt3').mouseenter(function() {
					$(this).hide();
				});
				$('#bt4').mouseleave(function() {
					$(this).hide();
				});
				//----------end--------
				//事件绑定与解绑------
				$('#bt5').bind('click', clickHaner1);
				$('#bt5').bind('click', clickHaner2);
				$('#bt5').unbind('click', clickHaner1);

				function clickHaner1() {
					alert('hello');
				}

				function clickHaner2() {
					alert('Hello2');
				}
				//end-----
				//自定义事件
				$('#bt6').click(function() {
					var e = jQuery.Event('myEvent');
					$('#bt6').trigger(e);
				});
				$('#bt6').bind('myEvent', function(event) {
					console.log(event);
				});
				//---事件冒泡和target---
				$('body').on('click', function() {
//					console.log('body');
				});
				$('div').on('click', function(event) {
						//阻止事件传递到body
						event.stopPropagation();
//						console.log(event);
					})
					//-----end---
				
			});
		</script>
	</head>

	<body>
		<button id="bt1">按钮单击</button>
		<button id="bt2">按钮双击</button>
		<button id="bt3">鼠标进入</button>
		<button id="bt4">鼠标离开</button>

		<button id="bt5">事件绑定与解绑</button>
		<button id="bt6">自定义事件</button>

		<div style="width: 300px; height: 300px;background: red;">
			事件目标和冒泡
			<ul>
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li>D</li>
			</ul>
		</div>

		<br/>
		<br/>
		<br/>
		<br/>
		
	</body>

</html>

自定义事件：

我的理解，就是将某元素的行为进行封装，这样将事件的触发与行为进行解耦

参考代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>trigger demo</title>
		<style>
			.room {
				width: 400px;
				height: 400px;
				background: lightgray;
				position: relative;
				float: left;
				margin-right: 20px;
			}
			
			.lightbulb {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: black;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -25px;
				margin-top: -25px;
			}
			
			.lightbulb.on {
				background: orange;
			}
			
			.lightbulb.off {
				background: black;
			}
			
			.switch {
				width: 60px;
				height: 30px;
				border-radius: 20px;
				background: white;
				position: absolute;
				text-align: center;
				line-height: 30px;
			}
			
			.s1 {
				left: 50%;
				bottom: 80px;
				margin-left: -30px;
			}
			
			.s2 {
				left: 50%;
				margin-left: -30px;
				bottom: 40px;
				z-index: 1;
			}
			
			.s1.on,
			.s2.on {
				background: greenyellow;
			}
			
			.clapper {
				width: 0;
				height: 0;
				border-bottom: solid 30px white;
				border-left: solid 30px transparent;
				border-top: solid 30px transparent;
				border-right: solid 30px transparent;
				position: absolute;
				bottom: 2px;
				left: 50%;
				margin-left: -30px;
				overflow: hidden;
				z-index: 0;
			}
			
			.clapper.on {
				border-bottom: solid 30px yellow;
				border-left: solid 30px transparent;
				border-top: solid 30px transparent;
				border-right: solid 30px transparent;
			}
			
			.master_switch {
				width: 200px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-radius: 40px;
				background: gray;
				float: left;
			}
			
			.master_switch.on {
				background: gold;
			}
		</style>
		<script src="jquery-2.2.4.min.js"></script>
	</head>

	<body>
		/*An example is probably the best way to explain. Suppose you have a lightbulb 
		 * in a room in a house. The lightbulb is currently turned on, and it's controlled
		  by two three-way switches and a clapper:
		  
		  Triggering the clapper or either of the switches will change the state of the
		   lightbulb. The switches and the clapper don't care what state the lightbulb 
		   is in; they just want to change the state
		   
		   If there are any lights on in the house, we want the master switch to turn all 
		   the lights off; otherwise, we want it to turn all lights on*/
		<div class="room r1">
			房子1
			<div class="lightbulb "></div>
			<div class="switch s1">开关1</div>
			<div class="switch s2">开关2</div>
			<div class="clapper"></div>
		</div>

		<div class="room r2">
			房子2
			<div class="lightbulb "></div>
			<div class="switch s1">开关1</div>
			<div class="switch s2">开关2</div>
			<div class="clapper"></div>
		</div>
		<div class="master_switch">总开关</div>
		<script>
		    //房间中的两个开关和clapper
			$('.s1, .s2, .clapper').on('click', function() {
				var _this = $(this);
				_this.toggleClass('on');
				//获取最近的房间
				var room = _this.closest('.room');
				//触发灯泡自定义事件
				room.find('.lightbulb').trigger('light:on');
			});
			
			//总开关
			$('.master_switch').on('click', function() {
				var _this = $(this);
				_this.toggleClass('on');
				var lightBulbs = $('.lightbulb');
				console.log(lightBulbs);
				//这里lightBulbs是个数组，居然可以这样写
				if (lightBulbs.is('.on')) {
				   //触发灯泡自定义事件
					lightBulbs.trigger('off');
				} else {
					//触发灯泡自定义事件
					lightBulbs.trigger('on');
				}
			})
			//灯泡状态，这里没有用toggClass,用起来这里貌似出问题。
			//这里为灯泡添加自定义事件light:on、on、off.
			$('.lightbulb').bind('light:on', function() {
				var _this = $(this);
				if (_this.is('.on')) {
					_this.trigger('off');
				} else {
					_this.trigger('on');
				}
			}).on('on', function() {
				$(this).removeClass('off');
				$(this).addClass('on');
			}).on('off', function() {
				$(this).removeClass('on');
				$(this).addClass('off');
			});
		</script>

	</body>

</html>

注意事项：

1. 相同事件添加到父节点即可，通过target来获取当前点击的元素

$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red'); });

2. 别把过多代码绑定到document.ready中，可以把部分不需要的移入windows.load中

以下是引用片段：

$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});

3.可以用data()，存储临时变量

以下是引用片段：

$(function(){
   $("button").click(function(){
     if( $("p").data("flag") ){
     $("p").text("true");
     $("p").data("flag",false);
   }else{
     $("p").text("false");
     $("p").data("flag",true);
  }
});
})