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