8、基础事件：
A、绑定事件
* .bind(type,[data],fn) //type为事件类型
$("input").bind('click',function(){
alert('弹窗');
});
$("input").bind('mouseovermouseout',function(){
$('p').html(function(index,value){
return value + '1';
})
});
$("input").bind({
mouseover:function(){
alert('移入');
},
mouseout:function(){
alert('移出');
}
})
*.unbind()
$('input').unbind();//删除全部事件
$('input').unbind('mouseover'); //只删除mouseover事件
$(‘input’).unbind(‘click’,fn); //删除fn处理的click事件
B、简写事件
*.click(fn)
$("input").click(function(){
alert('单击');
})
*.dblclick(fn)
$("input").dblclick(function(){
alert('双击');
})
*mouseup(fn)、mousedown(fn)
$("input").mouseup(function(){
alert('弹起');
})
* resize(fn)//页面大小改变时触发
$(window).resize(function(){
alert("Stop it!");
});
*.submit(fn) //表单提交
$('form').submit(function(){
alert("表单提交");
});
C、复合事件
* $('p').mouseover(function(){
$(this).css('background','green');
}).mouseout(function(){
$(this).css('background','red');
})
*$('p').mouseover(function(){ //会触发子节点
$('strong').html(function(index,value){
return value + 1;
});
})
* $('p').mouseenter(function(){ //enter不会触发子节点
$('strong').html(function(index,value){
return value + 1;
});
})
* $('p').mouseleave() //离开时触发
*keydown() 、keyup()
$('input').keydown(function(){
alert('键盘');
})
*focus() //光标激活
$('input').focus(function(){
alert('光标激活');
})
复合事件：
1).ready(fn) //DOM加载完成触发
$(document).ready(function(){
alert('yes');
});
2).hover(fn1,fn2)是mouseleave,和mouseenter的结合
$('p').hover(
function(){
$(this).css('background','green'); //mouseenter效果
},
function(){
$(this).css('background','red'); //mouseleave效果
})
9、事件对象：也就是event对象
A、事件对象 event ,参数也可以写e
* $('input').bind('click',function(e){
alert(e.type); //获取触发类型 -> click
})
* $('input').bind('click',{user:'zhansan',age:19},function(e){ //传递额外数据
alert(e.data.user);
})
*pageX、pageY、clientY
$(document).bind('click',function(e){
alert(e.pageX+","+e.pageY+","+e.clientY);
})
*e.which //判断鼠标的左 中右键 1 2 3
$(document).bind('mousedown',function(e){
alert(e.which);
})
B、冒泡和默认行为
** 冒泡行为：一个页面中，多个元素重叠，并且绑定在同一个事件中，当触发最上层的元素时，将依次主动触发其他元素
* $('input').click(function(){
alert('input');
})
$('p').click(function(){
alert('p');
})
$(document).click(function(){
alert('document');
}) //从小范围到大范围触发
* $('input').click(function(e){
e.stopPropagation(); //阻止冒泡行为
alert('input');
})
$('p').click(function(){
e.stopPropagation();
alert('p');
})
$(document).click(function(){
alert('document');
})
** 默认行为：如点击超链接，其默认行为是实现页面跳转，现在可以阻止其默认行为
* $('a').click(function(e){
e.preventDefault(); //阻止默认行为
alert('www.bai.com');
})
* 对于表单来说：
$('form').submit(function(e){
e.preventDefault(); //阻止默认行为
})
10、高级事件
A、模拟操作：
*.trigger(‘click’) //模拟用户操作，自动点击按钮
$('input').click(function(){
alert('按钮');
}).trigger('click');
也可传递额外数据
$('input').click(function(e,data1,data2){
alert(data1 + "|"+data2);
}).trigger('click',['123','abc']);
$('input').click(function(e,data1,data2,data3){
alert(data1 + "|"+data2 + "|" +data3);
}).trigger('click',['123','abc',['a','b','c']]); //传递数组 a b c
$('input').click(function(e,data1,data2,data3,data4){
alert(data1 + "|"+data2 + "|"+data3+"|"+data4.user);
}).trigger('click',['123','abc',['a','b','c'],{user:'zhangsan'}]);
* 自定义事件
$('input').click('myEvent',function(){
alert('自定义事件');
}).trigger('myEvent');
B、命名空间：方便用于解除事件
* $('input').bind('click.123',function(){ //.123表示命名空间
alert('123');
})
$('input').bind('click.abc',function(){
alert('abc');
})
$('input').unbind('click.123');
* $('input').bind('click.123',function(){
alert('123');
})
$('input').bind('click.abc',function(){
alert('abc');
})
$('input').bind('mouseover.123',function(){
alert('abc');
})
$('input').unbind('.123'); //去掉所有以.123的命名空间
C、事件委托：.live() .delegate() ，事件委托可以提高效率
解除事件委托 .die() .undelegate()
D、.on() .off().one()
$('input').on({
mouseover:function(){
alert('鼠标移入');
},
mouseout:function(){
alert('鼠标移出');
}
})
11、动画效果
A、显示.show()、隐藏.hide()、淡入、淡出、卷入、卷出
* $('.show').click(function(){
$('#box').show();
})
$('.hide').click(function(){
$('#box').hide();
})
* $('.show').click(function(){
$('#box').show('slow');
})
$('.hide').click(function(){
$('#box').hide('normal');
})
//三个参数slow normal fast分别对应600 400 200毫秒
