JQuery 事件

時間 2019-12-11

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

經常使用事件javascript

<!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>

自定義事件：css

個人理解，就是將某元素的行爲進行封裝，這樣將事件的觸發與行爲進行解耦html

參考代碼：java

<!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>

注意事項：jquery

1. 相同事件添加到父節點便可，經過target來獲取當前點擊的元素windows

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

2. 別把過多代碼綁定到document.ready中，能夠把部分不須要的移入windows.load中數組

如下是引用片斷：app

$(window).load(function(){
// 頁面徹底載入後才初始化的jQuery函數.
});

3.能夠用data()，存儲臨時變量ide

如下是引用片斷：函數

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。