jQuery 事件
原生JS带 on 的事件，去掉 on 就是 jQ 事件
1.单击事件 click();
原生JS中同一个对象绑定相同的事件，后面的会覆盖前面的事件；
btn[0].onclick=function(){
alert('a')
}
btn[0].onclick=function(){
alert('b')
}
//jq对象和dom对象是可以相互转换的
//jq对象转换成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.事件绑定数据
并不是局部变量
btn.click(foo="abc",function(){
alert(foo)
});
box.click(function(){
alert(foo)
});
3.hover()事件：相当于整合了enter+leave事件
box.mouseenter(function(){
console.log('我进来了')
});
box.mouseleave(function(){
console.log('我出来了')
});
box.hover(function(){
console.log('我进来啦')
},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方法，把他们扩在了一起，就相当于把click和function绑定在了一起
$('#btn').on('click',{foo:'a'},function(event){
alert(event.data.foo)
});
//写代码，多用事件的绑定，少直接用click，事件的绑定可以加快运行速度，减少资源消耗
指向元素的事件绑定
$(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版本之后才出现的新东西；
在1.7之前，我们都是用的bind来绑定事件;
1.7以后，出现了on,和bing效果完全一致，效率更好，所以就彻底替代了bind；
on 可以一次绑定多个事件；
$('#btn').on('click mouseenter',function(){
alert('s');
})
事件的委托
//jq里面事件的委托：将事件绑定在上一级元素上面，通过上一级元素来监听事件的触发
//事件的绑定
$('.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() 直接执行对象绑定的事件和默认行为
$('button').click(function(){
$('.ds').trigger('click')
});
*$('.ds').on('click',function(){
$(this).css('background','cyan')
});
triggerHandler 仅仅只是执行事件，不处罚默认行为
$('button').click(function(){
$('.ds').triggerHandler('click')
//和trigger一模一样，唯一的区别，不会执行浏览器的默认行为
//比如：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){
//获取鼠标点击的位置与滑块左侧的相对距离
var dx = e.clientX - box.offset().left;
var dsx = e.clientX;
//鼠标在滑块上面移动的事件
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>
