1. 鼠标事件
- click dblclick(同时会触发单击事件)
$('a').click(function(){
$('img').eq($(this).index()).css({'opacity':'1'})
.siblings().css({'opacity':'0'});
});
$('a').dblclick(function(){
$('img').eq($(this).index()).css({'opacity':'1'})
.siblings().css({'opacity':'0'});
});
- mousedown mouseup
- mouseenter mouseleave
- hover(mouseenter+mouseleave) 接受两个函数
$('a').hover(function(){
$('img').eq($(this).index()).css({'opacity':'1'})
.siblings().css({'opacity':'0'});},function(){
$('img').eq($(this).index()).css({'opacity':'0'})
.siblings().css({'opacity':'1'});
});
- mouseover mouseout(进出子元素时也触发 作用跟enter和leave一样)
- mousemove 在内部发生移动
- scroll(滚动指定元素时)
2. 键盘事件
- keydown keyup keypress
$(document).keydown(function(){});
$('input').keyup(function(){});
$(document).keypress(function(){});
$('input').keypress(function(){});
3. 其他事件
- ready DOM载入就绪后执行
- resize 调整浏览器窗口大小时发生
$(window).resize(function(){});
- focus blur
- change
- select input类型为text或textarea等中的文本被选中时
- submit 提交表单时(button用在form中有提交表单功能,用在其他地方没有)
$('input[type=button]').click(function(){
$('form').submit();
});
$('form').submit(function(){
return false;
});
$('form').submit(function(){
var value=$('input[type=text]').val();
if(value){
return true;
}
4. 事件参数
- event 任何事件都有
var index=0;
$('a').mouseenter(function(){
index=$(this).index();
swiper();
}
$(document).keydown(function(event){
if(event.keyCode == 37){
index = index>0? --index:$('a').length-1;
}else if(event.keyCode == 39){
index = index<$('a').length-1? ++index:0;
}else{return true;)
swiper();
});
var swiper = function(){
$('img').eq(index).css({'opacity':'1'})
.siblings().css({'opacity':'0'});
}
5. 事件绑定与取消
- on 绑定多个事件
$('input').keyup(function(){});
$('input').on('keyup',function(){});
$(document).on('keyup','a',function(event){
event.stopPropagation();
});
$('a').add(document).on({
mouseenter:function(event){},
keydown:function(event){}
});
- off
$(document).off('click','.obj',funcName);
- one 绑定一个一次性的事件函数
$(document).one('click','.obj',funcName);