目录
事件绑定
bind(type,[,data],fn)
type:事件类型
data:作为event.data属性值传递给事件对象的额外数据对象
function greet(event){
alert("hello"+event.data.name);
}
$('button').bind('click',{name:'cc'},greet);
fn:处理函数
on(event,[,selector][,data],handler)
//打印tbody-->tr的文本信息
$('#table tbody tr').on('click',function(){
console.log($(this).text());
});
//和上面的等价
$('#table tbody').on('click','tr',function(){
console.log($(this).text());
});
事件解绑
unbind()
unbind('click');
删除元素的所有绑定click的事件
unbind('click',handle1)
移除handle1的绑定事件
off()
没有参数,则删除所有绑定的事件
有参数,则删除该类型的绑定事件
交互事件
hover()
用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个fn,当光标移出这个元素时,会触发指定的第2个函数。
移入移出触发的是mouseenter和mouseleave.
$('.ulList').hover(function(){
$(this).css('background','orange');
},function(){
$(this).css('background','');
});
<ul class="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
toggle()
用于模拟鼠标连续单击事件。第一次点击会触发指定的第一个fn,第二次点击会触发指定的第2个函数。如果有更多的函数则依次执行。随后每次点击则重复对这些函数轮番调用。该事件在jQuery1.9版本后被删除,实现切换该用方法。
$(function(){
$('button').click(function(){
$p=$(this).next('p');
if($p.is(":visible")){
$p.hide();
}else{
$p.show();
}
});
//将上面的用toggle改写
$('.more').click(function(){
$(this).next('div.content').toggle();
});
});
<body>
<button class="more">查看更多</button>
<div class="content">
这是一个关于...
</div>
</body>
事件冒泡
冒泡是指在子元素和父元素都绑定同一个事件,当子元素触发时,父元素的此事件也会触发。js冒泡相关操作请看DOM事件
事件对象
jQuery中对事件进行了兼容处理,能够轻松获取事件对象以及对象的属性。
$('element').bind('click',function(event){
//event 事件对象
})
阻止冒泡
event.stopProagation()
阻止默认
event.preventDefault()
**:阻止默认也可以写成 return false
事件对象的属性
event.type()
该方法作用是可以获取事件类型
event.target()
获取触发事件的元素
event.pageX(),event.pageY()
该方法获取点击页面的x坐标和y坐标。
event.which()
获取鼠标单击事件中获取到鼠标的左、中、右键分别返回1、2、3
模拟操作
trigger()
$('btn').click()
//和上面等价
$('btn').trigger('click')
加载DOM
$(document).ready()方法
该方法是在DOM载入就绪时就对其进行操作并调用执行他它所绑定的函数。
绑定多个事件则移除执行。
window.onload
是页面所有的元素(包括所关联文件)完全加载后才执行。若多次绑定则只执行最后一次绑定的事件。