前端編程提高之旅（十五）----jquery事件

HTML與js交互主要通過用戶與瀏覽器操作頁面時引發事件。文檔或某些元素髮生某些變化或操作時，瀏覽器會生成事件。jquery增加了事件處理能力。

jquery事件部分可以從以下五部分理解：

一、加載DOM函數

這裏指的如下方法：

 $(document).ready(function(){
  })

相比於傳統的window.onload方法，前者在執行時機與可否多次使用上區別於後者。

前者是在DOM完全就緒回調就會被調用，後者則是網頁所有元素（包含關聯文件）完全加載到瀏覽器後纔會被調用。這裏常見應用場景是，當需要對圖片進行操作時，需要採用後者，因爲後者才能保證圖片文件被加載完成執行。

前者可以多次使用，而後者只能使用一次，即便多次定義，後定義的函數會將之前定義的函數覆蓋掉。

二、各種事件綁定的方法

(1）一般綁定方法：bind方法

bind方法參數分別定義事件類型、回調函數。

構建一個實例，HTML如下：

<div id="panel">
	<h5 class="head">什麼是jQuery?</h5>
	<div class="content">
		jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
	</div>
</div>

bind使用代碼如下：

  $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})

需要注意的是，回調函數內，this指的是帶有相應行爲的DOM元素，如需使用jquery中方法，徐將其轉化爲Jquery對象$(this)形式。

（2）在bind基礎上，簡寫綁定方法

簡寫的綁定方法，方法名代表事件類型，參數爲回調函數。

依然延續上例，簡寫方法使用如下：

$("#panel h5.head").mouseover(function(){
	    $(this).next().show();
	}).mouseout(function(){
	    $(this).next().hide();
	})

（3）合成事件

這裏合成事件有兩個hover方法與toggle方法。

hover方法用於模擬鼠標懸停事件，有兩個回調函數作爲參數，第一個回調代表光標移入執行，第二個回調代表光標移出執行。

沿用上例，使用方法如下：

$("#panel h5.head").hover(function(){
	    $(this).next().show();
	},function(){
	    $(this).next().hide();   
	})

toggle方法用於模擬鼠標連續單擊行爲，參數爲多個回調，每個回調會根據單擊次序順序循環執行。

不過這個方法在jquery1.9版本已經被刪除了，這裏並不多做討論。

（4）模擬操作

模擬的是操作，也即是交互行爲，從而引發事件，執行回調。這裏用到的是trigger方法。

舉個例子，HTML代碼：

<button id="btn">點擊我</button>
<div id="test"></div>

採用模擬操作的代碼：

$('#btn').bind("click", function(){
					 $('#test').append("<p>我的綁定函數1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的綁定函數2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的綁定函數3</p>");
		      });
	   $('#btn').trigger("click");

對DOM綁定了單擊事件，採用trigger方法，模擬了click事件，從而執行了回調。

這裏trigger方法模擬操作的事件還可以是自定義事件，當然也需要同時綁定自定義事件。

依然延續上例，採用自定義事件代碼實例：

$('#btn').bind("myClick", function(){
			$('#test').append("<p>我的自定義事件.</p>");
		});
	   $('#btn').click(function(){
			$(this).trigger("myClick");
	   });

trigger方法除了可以模擬操作，還可以在第二個參數中傳入數據，這在MVC框架中，view間傳遞數據極其常用。

$('#btn').bind("myClick", function(event, message1, message2){
			$('#test').append( "<p>"+message1 + message2 +"</p>");
		});
	   $('#btn').click(function(){
			$(this).trigger("myClick",["我的自定義","事件"]);
	   });

採用triggerHandler方法可以模擬操作的同時避免觸發瀏覽器默認操作，具體實例如下：

html：

<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />

jquery代碼：

 $('#old').bind("click", function(){
			$("input").trigger("focus");
		});
		$('#new').bind("click", function(){
		    $("input").triggerHandler("focus");
		});
		$("input").focus(function(){
            $("body").append("<p>focus.</p>");
        })

對比可知，後者沒有觸發瀏覽器默認聚焦功能。

（5）綁定多個事件

綁定多個事件的方法可採用bind方法，在第一個參數中將事件類型空格隔開。

使用案例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
  div{
	width:100px;
	height:50px;
  }
  .over{
  color:red;
  background:#888;
  } 
  </style>
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
     $("div").bind("mouseover mouseout click", function(){
        $(this).toggleClass("over");
     });
  })
  </script>
</head>
<body>
<div >滑入.</div>
</body>
</html>

（6）給綁定事件添加命名空間

命名空間便於管理，當元素綁定多個事件時，刪除事件只需要指定命名空間，節省了代碼量。

實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
	div{width:100px;height:50px;background:#888;color:white;}
 </style>
  <script src="../../scripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
	$("div").bind("click.plugin",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
	       $("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		   $("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
	/*
		click,mouseover 事件被刪除，
	*/
  })
  </script>
</head>
<body>
<div>test.</div>
<button >根據命名空間，刪除事件</button>
</body>
</html>

三、移除事件

上面提到了綁定事件的各種方法，移除事件主要採用unbind方法，第一個參數即移除事件名，第二個參數可選爲移除回調函數。

使用實例：

$('#btn').bind("click", myFun1 = function(){
					 $('#test').append("<p>我的綁定函數1</p>");
			  }).bind("click", myFun2 = function(){
					 $('#test').append("<p>我的綁定函數2</p>");
			  }).bind("click", myFun3 = function(){
				  	 $('#test').append("<p>我的綁定函數3</p>");
		      });
	   $('#delTwo').click(function(){
			  $('#btn').unbind("click",myFun2);//移除第二個綁定click函數
	   });

假如事件只需執行一次，可以採用one方法進行事件綁定，用法類似bind方法。

 $('#btn').one("click", function(){
					 $('#test').append("<p>我的綁定函數1</p>");
			  }).one("click", function(){
					 $('#test').append("<p>我的綁定函數2</p>");
			  }).one("click", function(){
				  	 $('#test').append("<p>我的綁定函數3</p>");
		      });

四、事件對象屬性

事件對象，顧名思義即觸發事件後，傳入回調函數的對象，包含事件類型、事件目標、光標位置等與事件有關的屬性。

根據這些事件對象屬性，便於編寫關於本事件的各種操作。常用的防止多次單擊、防止冒泡、默認操作都採用事件對象屬性實現。

實例：

$("a").click(function(event) {
	  alert("Current mouse position: " + event.pageX + ", " + event.pageY );//獲取鼠標當前相對於頁面的座標
	  return false;//阻止鏈接跳轉
	});

五、事件冒泡與阻止默認行爲

（1）事件冒泡

關於事件冒泡，即觸發一個事件，整個事件會從本層元素向外部包含的元素擴散，這樣就可能導致，不希望觸發的元素被觸發事件。

實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// 爲span元素綁定click事件
	$('span').bind("click",function(){
		var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
		$('#msg').html(txt);
	});
	// 爲div元素綁定click事件
	$('#content').bind("click",function(){
	    var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
		$('#msg').html(txt);
	});
	// 爲body元素綁定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content">
	外層div元素
	<span>內層span元素</span>
	外層div元素
</div>

<div id="msg"></div>
</body>
</html>

解決事件冒泡的方法是在上述案例中，執行事件對象屬性防止對象冒泡方法event.stopPropagation方法。

$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 爲div元素綁定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});

（2）阻止瀏覽器默認行爲

這裏採用的是事件對象屬性的event.preventDefault方法。

（3）如果既想阻止冒泡行爲，又需要阻止瀏覽器默認行爲，可以再回調中返回false，一併執行。

實例：

$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
		$('#msg').html(txt);
		return false;
	});

前端編程提高之旅（十五）----jquery事件

微信移動端招聘項目總結

前端編程提高之旅（八）----D3.js數據可視化data join解析

招聘後臺投遞設置聯動按鈕迭代開發總結

走進小作坊（十九）----商場博弈論的詭計

走進小作坊（二十三）----數據之美

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結