jQuery里面的事件

参数说明

参数	说明
data	可传入data供函数fn处理。
fn	在每一个匹配元素的focus事件中绑定的处理函数
speed	隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次
out	当鼠标移到元素上或移出元素时触发执行的事件函数
over	鼠标移到元素上要触发的函数
type	要触发的事件类型
events	一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector	一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
type	添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

<button id="btn">按钮</button>
<input type="text" class="ipt" value="123"/>
<div class="box" style="width: 100px; height: 100px; border: 1px solid red"></div>
<ul class="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<p>段落</p>
<div class="red" style="width: 100px; height: 100px;background-color: red"></div>

一、页面载入—ready(fn)

• 页面加载完成事件----ready() 等价于 window.onload()
• 完全写法

   $(document).ready(function(){
       console.log('加载完成');
   });

• 简单写法

   $(function(){
       console.log('加载完成');
   });

二、事件

• jquery里面添加事件，直接对象点方法，不需要写on。
• data是事件传递的数据，fn是事件的匿名函数回调。

方法	概述
blur([[data],fn])	当元素失去焦点时触发 blur 事件。
change([[data],fn])	当元素的值发生改变时，会发生 change 事件。
click([[data],fn])	触发每一个匹配元素的click事件。
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。
error([[data],fn])	当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])	当元素获得焦点时，触发 focus 事件。
focusin([data],fn)	当元素获得焦点时，触发 focusin 事件。可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)	当元素失去焦点时触发 focusout 事件。可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])	当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn])	当键盘或按钮被按下时，发生 keypress 事件。
keyup([[data],fn])	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn])	当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave([[data],fn])	当鼠标指针离开元素时，会发生 mouseleave 事件
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout([[data],fn])	当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseover([[data],fn])	当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup([[data],fn])	当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize([[data],fn])	当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])	当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])	当提交表单时，会发生 submit 事件。

• 事件传递的数据，在事件的执行参数上。

   $('#btn').click(function(e){
       console.log('点击', e.data);
   }).mouseleave(function(){
       console.log('离开');
   }).mouseenter(function(){
       console.log('进入');
   }).mousemove(function(){
       console.log('移动');
   })

   //完全获焦
   $('.ipt').focus(function(){
       $(this).css({
           color:'red'
       });
   });

   //获焦
   $('.ipt').focusin(function(){
       $(this).css({
           color:'red'
       });
       //失焦
   }).focusout(function(){
       $(this).css({
           color:'blue'
       });
   });

   $('.ipt').focusin(function(){
       console.log(1);
   }).focus(function(){
       console.log(2);
   }).focusout(function(){
       console.log(3);
   }).blur(function(){
       console.log(4);
   })

三、滚轮事件

• jquery滚轮事件

   $(document).bind('mousewheel',function(e){
       //下面这个值的正负，判断上下滑动
       console.log(e.originalEvent.deltaY);
   });

• 原生js滚轮事件

   document.addEventListener('mousewheel',function(e){
       console.log(e.deltaY);
   })

四、事件切换

方法	概述
hover([over,]out)	mousein和mouseout事件切换
toggle([speed],[easing],[fn])	如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

   $('.box').hover(function(){
       console.log('进入');
   },function(){
       console.log('离开');
   });

五、事件处理

方法	概述
on(eve,[sel],[data],fn)	在选择元素上绑定一个或多个事件的事件处理函数。
off(eve,[sel],[fn])	在选择元素上移除一个或多个事件的事件处理函数。若不写参数，指全部移除，有参数表示移除指定事件
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数，不能委托
unbind(type,[data fn]])	bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
one(type,[data],fn)	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger(type,[data])	在每一个匹配的元素上触发某类事件。

1.on—使用on进行事件绑定，可以委托

   $('.box').on('click',10,function(e){
       console.log(e.data);
   });
   $('.menu').on('click','li',function(e){
       console.log(e.target);
   });

2.on—一次绑定多个事件

	$('.box').on('mouseenter mouseleave',function(e){
       if(e.type == 'mouseenter')
       {
           console.log('进入');
       }
       else{
           console.log('离开');
       }
   });

• 或者

    $('.box').on('mouseenter',function(){
        console.log("进入");
    }).on('mouseleave',function(){
        console.log("离开");
    }) 

3.off—若不写参数，指全部移除，有参数表示移除指定事件。

   //移除所有事件
   $('.menu').off();
   //移除指定事件
   $('.menu').off('click');

4.委托事件的添加和移除

   function method(){
       console.log('段落');
       $('body').off('click','p',method);//事件执行一次移除
   }
   $('body').on('click','p',method);

5.bind—绑定事件

    $('.red').bind('click mouseleave',function(){
        console.log('点击');
    }); 

6.unbind—移除事件

• 不带参，全部移除，带参，移除指定事件。

   //全部移除
   $('.red').unbind();
   //移除指定事件
   $('.red').unbind('click');

7.one绑定事件

   $('.red').one('click',function(){
       console.log('点击');
   });

8.trigger指定触发事件

   $('.red').click(20,function(e,a,b,c){
       console.log('点击', e.data, a, b, c);//点击 20 1 2 3
   }).trigger('click',[1,2,3]);

9.添加自定义事件

	$('.red').on('myevent',function(e){
       console.log(e);
   }).trigger('myevent');