jQuery事件處理機制

jQuery事件處理機制:

事件處理機制
1)事件綁訂的方式
bind(type,fn)
2)、綁訂方式的簡寫形式
click(function(){
});
3)、合成事件
hover(enter,leave) : 模擬光標懸停事件
toggle(fn1,fn2...)：模擬鼠標連續單擊事件
4)、事件冒泡
a、獲得事件對象
//event不再是原始的事件對象，而
//是封裝之後的對象。
click(function(event){
});
b、停止冒泡
event.stopPropagation()
c、停止默認行爲
event.preventDefault()
5)、事件對象的屬性
event.type
event.target:返回事件源（是dom對象!!!）
event.pageX/pageY: 點擊的座標

6)、模擬操作
trigger('click')

示例：

<script type="text/javascript">
	 $(function(){
	//合成事件： hover(enter,leave) : 模擬光標懸停事件
	//			toggle(fn1,fn2...)：模擬鼠標連續單擊事件
	 	$('#d1').hover(function(e){
		 //this代表原始的dom節點
		//$(this):將原始的dom節點封裝成了jQuery對象
		$(this).addClass('s1');},
		function(){$(this).removeClass('s1');});
	 });
	 $(function(){
	 	$('a.s1').click(function(e){
			alert($(this).html());//$(this):表示當前點擊的那個對象
			//e表示封裝之後的那個事件對象
			//依據事件對象找到事件源
			//event.target:返回事件源（是dom對象!!!）
			var obj = e.target; //obj是原始的dom節點
			alert(obj.innerHTML);
			alert($(obj).html());//$(obj):將原始的dom節點封裝成了jQuery對象
			
		});
		 $('#d1').click(function(e){
		 	alert('you clicked the div');
		//也可以這樣寫,因爲click()方法執行完之後，
		//返回的仍然是$('#d1')那個對象，所以可以
		//寫成這樣的一種結構: $(選擇器).click().click()
		 }).click();
		 $('#a1').click(function(e){
		 	alert('你點擊了一個鏈接');
			e.preventDefault();//停止默認行爲
			e.stopPropagation();//停止冒泡
		 });
		 $('#d2').click(function(e){
		 	$(this).html('x= '+e.pageX+' y= '+e.pageY);//event.pageX/pageY: 點擊的座標
		 });
	 });
</script>

html

 <ul>
 	<li>one</li>
    <li>two</li>
    <li>three</li>
 </ul>
 	<a href="javascript:;" class="s1">Click1</a><br/>
	<a href="javascript:;" class="s1">Click2</a><br/>
    <div id="d1" style="width:200px;height:200px;
		border:1px solid black;">
			<a href="del.do" id="a1">Click</a>
		</div>
		<div id="d2" style="width:200px;height:200px;
		border:1px solid black;">
			
		</div>
    
 <input type="button" value="click" id="b1" />