jQuery（四）jQuery事件機制與JavaScript的區別

時間 2019-11-06

標籤 jquery 事件機制 javascript 區別欄目 JQuery 简体版

原文原文鏈接

jQuery事件機制與JavaScript的區別javascript

單獨用一篇來說這個標題確定是不行的，但這個其實也是一個比較關鍵的地方。看過前面文章的同窗應該都知道，對於JS而言事件的階段有捕捉階段和冒泡階段。對於Jquery而言他只有冒泡階段，這個地方是比較關鍵的地方。html

體現冒泡階段的一段jquery代碼（js的請回看js系列）：java

$(document).ready(function(){
	
	
	$('div').click(function(event){
	
				alert("div");
			
	});
	
	$('#mBtn').click(function(){
	
		alert("mBtn");
		event.stopPropagation();
	});
});

//html頁面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/event.js" ></script>
	</head>
	<body>
		<div>
			<p>測試事件的冒泡<p>
			<input class="button" id="mBtn" type="button" value="maopao" />
			<a href="http://www.baidu.com">enen</a>
		</div>
	</body>
</html>

兩種方式進行對冒泡事件的阻止，固然是有這個阻止的需求的前提哈。jquery

1.藉助event.target保留了發生事件的目標元素//js中也可使用性能

$(document).ready(function(){
	//對外層加一個判斷，function中必須帶參數，否則用的就是全局的沒法進行判斷
	$('div').click(function(event){
			if(event.target==this){
				alert("div");
			}
	});
	
	$('#mBtn').click(function(){
	
		alert("mBtn");
	})
	
});

2.使用中止事件傳播的方法測試

$(document).ready(function(){

	$('div').click(function(event){
	
		alert("div");
			
	});
	
    //使用全局event的中止事件傳播方法
	$('#mBtn').click(function(){
	
		alert("mBtn");
		event.stopPropagation();
	});
	
});

下面會引入一個概念：默認操做，這個體系是和事件傳播不一樣的。二者任意一個發生都會終止另外一個，同時終止兩個要return false；或者一塊兒調用 stopPropagation();和.preventDefault();其實就解釋了爲何個人js有一次必需要使用return false,才行。this

事件委託：當爲每個按鈕都註冊一個事件的，若是是對一個表格內的全部按鈕進行操做的話若是都註冊事件，實際上是一個極其浪費內存，影響性能的一件事情。一個很好的方式就是利用冒泡原理，將事件進行委託給最頂層的其中一個元素，其實我在js裏面都已經有這個思想了，查看js實現開源中國IT技能頁面的思想。代碼以下：code

function entrust(){
	$('body').click(function(event){
		if($(event.target).is('.button')){
			if(event.target.id=='mBtn'){
				alert('mBtn');
			}else{
				alert("error!");
			}
		}
		
	});
}

代碼只對了一個按鈕操做，你能夠對更多的按鈕進行操做，仍是比較簡單關鍵的就是event.target記錄的點擊事件的元素，包括了它的id，class,value值等屬性。htm

模擬用戶操做事件：jquery裏面提供了兩種方式,不帶參數的使用簡寫方法，使用.trigger()方法事件

$('#mBtn').click();
	$('#mBtn').trigger('click');

鍵盤事件：最關鍵的一個實踐經驗，用戶按了哪一個鍵，監聽keyup或keydown，用戶輸入了什麼字符，應該監聽keypress事件(按下不放能夠輸入不少字符，有一個字符輸入就除非事件)。這個地方就是最關鍵的地方。

$(document).keyup(function(event){
		switch(String.fromCharCode(event.keyCode)){
			case 'D':
			   alert("DDDD!!!");break;
			case 'F':
			   alert("FFFF!!!");break;
		}
	});