jQuery事件

事件

鼠标事件 w3c查阅

常见事件

1. mouseover 悬浮事件
2. mousemove 移动事件
3. mouseout 移除事件
4. keydown 按下事件
5. keypress 持续按住事件
6. keyup 松开按键事件

//悬浮事件
$('div').mouseover(()=>{
    alert('1');
})
//移出事件
$('div').mouseout(()=>{
    alert('2');
}
//链式写法
$('div').mouseover(()=>{
    alert('1');
}).mouseout(()=>{
    alert('2');
});

可以通过 event.keycode 获取按键

 $('body').keydown((e)=>{
            alert(e.keyCode);
        })

表单事件

1. focus() 获得焦点

2. blur() 失去焦点

绑定事件

$(...).bind("事件名",函数)

 $('#userId').bind('click',()=>{
            
})

批量绑定

$(...).bind({"事件名":函数,'事件名':函数})

//bind批量绑定事件
  $("button").bind({
    focus: () => $("div").css("color", "red"),
    blur: () => $("div").css("color", "yellow"),
  });
});

解绑事件

$(...).unbind({"事件名");

复合事件

hover() 就相当于mouseover和mouseout的结合

//hover 
 $('#hover').hover(()=>alert('悬浮'),()=>alert('离开'));

toggle 轮询事件 1.9版本之前有效

//hover 复合事件
        
        $('body').toggle(function(){
            $(this).css('color','red');
        },function(){
            $(this).css('color','red');
        },function(){
            $(this).css('color','red');
        })

显示和隐藏

hide和show

hide([时间],[callback]) 隐藏
show([时间],[callback]) 显示

$("#button").click(()=>{
    console.log('1');
    $('div').hide(500,()=>{
        alert("隐藏后的回调函数");
    })
}),
$('#button2').click(()=>{
    console.log('2');
    $('div').show(500,()=>{
        alert("显示后的回调函数");
    })
})

fadein fadeout 淡入淡出

$("#button").click(()=>{
    console.log('1');
    $('div').fadeOut(500,()=>{
        alert("隐藏后的回调函数");
    })
}),
$('#button2').click(()=>{
    console.log('2');
    $('div').fadeIn(500,()=>{
        alert("显示后的回调函数");
    })
})

slideDown slideUp 控制高度

$("#button").click(()=>{
    console.log('1');
    $('div').slideUp(500,()=>{
        alert("隐藏后的回调函数");
    })
}),
$('#button2').click(()=>{
    console.log('2');
    $('div').slideDown(500,()=>{
        alert("显示后的回调函数");
    })
})