jQuery 事件
原生JS帶 on 的事件，去掉 on 就是 jQ 事件
1.單擊事件 click();
原生JS中同一個對象綁定相同的事件，后面的會覆蓋前面的事件；
btn[0].onclick=function(){
alert('a')
}
btn[0].onclick=function(){
alert('b')
}
//jq對象和dom對象是可以相互轉(zhuǎn)換的
//jq對象轉(zhuǎn)換成dom對象
//方法一：$('#btn')[0];
//方法二：$('#btn').get(0);
//jq中同一個對象綁定相同的事件，不會被覆蓋，多個事件融合在一起
/*$(document).click(function(){
alert('document');
});
btn.click(function(){
alert('a')
});
btn.click(function(){
event.stopPropagation();//阻止冒泡
alert('b');
});
btn.click(function(){
alert('a');
event.stopPropagation();
alert('b')
});*/
2.事件綁定數(shù)據(jù)
并不是局部變量
btn.click(foo="abc",function(){
alert(foo)
});
box.click(function(){
alert(foo)
});
3.hover()事件：相當(dāng)于整合了enter+leave事件
box.mouseenter(function(){
console.log('我進(jìn)來了')
});
box.mouseleave(function(){
console.log('我出來了')
});
box.hover(function(){
console.log('我進(jìn)來啦')
},function(){
console.log('我出來啦')
});
4.鍵盤按下事件
$(document).keydown(function(event){
console.log(event.keyCode)
});
5.窗口大小改變事件
$(window).resize(function(){
alert('s')
});
6.頁面滾動事件
$(window).scroll(function(){
alert('s')
});
7.文本選中事件
txt.select(function(){
console.log('xiaoming');
});
事件綁定
//簡單的寫法：
$('#btn').click(function(){
alert('s')
});
//通過on方法，把他們擴(kuò)在了一起，就相當(dāng)于把click和function綁定在了一起
$('#btn').on('click',{foo:'a'},function(event){
alert(event.data.foo)
});
//寫代碼，多用事件的綁定，少直接用click，事件的綁定可以加快運(yùn)行速度，減少資源消耗
指向元素的事件綁定
$(document).on('click','li',function(){
alert('s')
})
事件的解綁
$('#btn').on('click',function(){
alert('s')
});
$('#btn').on('click',function(){
alert('d')
});
$('#btn').off('click');
jq事件綁定的命名空間
$('#btn').on('click.abc',function(){
alert('a');
});
$('#btn').on('click.dfg',function(){
alert('b');
});
$('#btn').off('click.adc');
on事件，是在jq 1.7版本之后才出現(xiàn)的新東西；
在1.7之前，我們都是用的bind來綁定事件;
1.7以后，出現(xiàn)了on,和bing效果完全一致，效率更好，所以就徹底替代了bind；
on 可以一次綁定多個事件；
$('#btn').on('click mouseenter',function(){
alert('s');
})
事件的委托
//jq里面事件的委托：將事件綁定在上一級元素上面，通過上一級元素來監(jiān)聽事件的觸發(fā)
//事件的綁定
$('.box li').on('click',function(){
$('.box2').append($(this).clone())
});
//事件的委托
$('.box').on('click','li',function(){
console.log($(this).html())
});
一次性事件
$('button').one('click',function(){
alert('s')
});
trigger() 直接執(zhí)行對象綁定的事件和默認(rèn)行為
$('button').click(function(){
$('.ds').trigger('click')
});
*$('.ds').on('click',function(){
$(this).css('background','cyan')
});
triggerHandler 僅僅只是執(zhí)行事件，不處罰默認(rèn)行為
$('button').click(function(){
$('.ds').triggerHandler('click')
//和trigger一模一樣，唯一的區(qū)別，不會執(zhí)行瀏覽器的默認(rèn)行為
//比如：from的提交
//比如：瀏覽器的冒泡行為
});*/
demo 滑動解鎖
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 50px;
border: 1px solid #aaa;
position: relative;
margin: 100px auto;
}
.slider{
width: 100px;
height: 50px;
background: darkgreen;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 10;
}
.sp{
width: 100%;
position: absolute;
text-align: center;
line-height: 50px;
font-size: 18px;
z-index: 5;
display: none;
}
</style>
<div class="box" id="box">
<div class="slider" id='slider'></div>
<span class="sp" id="sp">解鎖成功</span>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var box = $('#box');
var slider = $('#slider');
var sp = $('#sp');
slider.mousedown(function(e){
//獲取鼠標(biāo)點(diǎn)擊的位置與滑塊左側(cè)的相對距離
var dx = e.clientX - box.offset().left;
var dsx = e.clientX;
//鼠標(biāo)在滑塊上面移動的事件
box.mousemove(function(e){
var sliderLeft = e.clientX - dsx;
slider.css('left',sliderLeft);
if(slider.position().left>=700){
slider.css('left','700px');
}
if(slider.position().left<=0){
slider.css('left','0px');
}
});
});
slider.mouseup(function(){
box.off('mousemove');
if(slider.position().left==700){
slider.css('display','none');
sp.css('display','block');
}
if(slider.position().left<700){
slider.css('left',0);
}
});
slider.mouseout(function(){
slider.mouseup()
});
});
</script>
