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" />