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