jQuery -- 事件、事件对象、动画效果

8、基础事件：

A、绑定事件

* .bind(type,[data],fn)  //type为事件类型   

 $("input").bind('click',function(){

    alert('弹窗');

  });

  $("input").bind('mouseovermouseout',function(){

    $('div').html(function(index,value){

           return value + '1';

      })

  }); 

  $("input").bind({

       mouseover:function(){

            alert('移入');

        },

       mouseout:function(){

            alert('移出');

        }

  })

*.unbind() 

$('input').unbind();//删除全部事件

$('input').unbind('mouseover');  //只删除mouseover事件

$(‘input’).unbind(‘click’,fn);   //删除fn处理的click事件

B、简写事件

*.click(fn)     

$("input").click(function(){

       alert('单击');

  })

*.dblclick(fn)

  $("input").dblclick(function(){

       alert('双击');

  })

*mouseup(fn)、mousedown(fn)

  $("input").mouseup(function(){

       alert('弹起');

  })

 * resize(fn)  //页面大小改变时触发

$(window).resize(function(){

  alert("Stop it!");

});

*.submit(fn)  //表单提交

$('form').submit(function(){

  alert("表单提交");

});

C、复合事件

* $('div').mouseover(function(){

      $(this).css('background','green');

}).mouseout(function(){

      $(this).css('background','red');

})

*$('div').mouseover(function(){   //会触发子节点

      $('strong').html(function(index,value){

           return value + 1;

      });

})

* $('div').mouseenter(function(){  //enter不会触发子节点

      $('strong').html(function(index,value){

           return value + 1;

      });

})

* $('div').mouseleave()  //离开时触发

*keydown() 、keyup()

$('input').keydown(function(){

       alert('键盘');

 })

*focus()  //光标激活

$('input').focus(function(){

       alert('光标激活');

 })

复合事件：

1）.ready(fn)  //DOM加载完成触发

$(document).ready(function(){

  alert('yes');

});

2）.hover(fn1,fn2)是mouseleave,和mouseenter的结合

$('div').hover(

    function(){

         $(this).css('background','green'); //mouseenter效果

    },

    function(){

           $(this).css('background','red');  //mouseleave效果

      })

 

9、事件对象：也就是event对象

A、事件对象 event ,参数也可以写e

 *  $('input').bind('click',function(e){

       alert(e.type);  //获取触发类型 -> click

  })

*   $('input').bind('click',{user:'zhansan',age:19},function(e){  //传递额外数据

       alert(e.data.user);

  })

*pageX、pageY、clientY

  $(document).bind('click',function(e){

       alert(e.pageX+","+e.pageY+","+e.clientY);

  })

*e.which  //判断鼠标的左 
中右键 1 2 3

  $(document).bind('mousedown',function(e){

       alert(e.which);

  })

B、冒泡和默认行为

**  冒泡行为：一个页面中，多个元素重叠，并且绑定在同一个事件中，当触发最上层的元素时，将依次主动触发其他元素

*   $('input').click(function(){

       alert('input');

  })

  $('div').click(function(){

       alert('div');

  })

  $(document).click(function(){

       alert('document');

  })   //从小范围到大范围触发

*    $('input').click(function(e){

       e.stopPropagation();  //阻止冒泡行为

       alert('input');

  })

  $('div').click(function(){

       e.stopPropagation();

       alert('div');

  })

  $(document).click(function(){

       alert('document');

  })

** 默认行为：如点击超链接，其默认行为是实现页面跳转，现在可以阻止其默认行为

*  $('a').click(function(e){

       e.preventDefault();  //阻止默认行为

       alert('www.bai.com');

  })

* 对于表单来说：

  $('form').submit(function(e){

       e.preventDefault();  //阻止默认行为

  })

 

10、高级事件

A、模拟操作：

*.trigger(‘click’)  //模拟用户操作，自动点击按钮

  $('input').click(function(){

       alert('按钮');

  }).trigger('click');

也可传递额外数据

  $('input').click(function(e,data1,data2){

       alert(data1 + "|"+data2);

  }).trigger('click',['123','abc']);

 $('input').click(function(e,data1,data2,data3){

       alert(data1 + "|"+data2 + "|" +data3);

 }).trigger('click',['123','abc',['a','b','c']]);  //传递数组 a b c

 

 $('input').click(function(e,data1,data2,data3,data4){

       alert(data1 + "|"+data2 + "|"+data3+"|"+data4.user);

 }).trigger('click',['123','abc',['a','b','c'],{user:'zhangsan'}]);

* 自定义事件

  $('input').click('myEvent',function(){

       alert('自定义事件');

  }).trigger('myEvent');

B、命名空间：方便用于解除事件

  * $('input').bind('click.123',function(){  //.123表示命名空间

       alert('123');

  })

  $('input').bind('click.abc',function(){

       alert('abc');

  })

  $('input').unbind('click.123');

 

*   $('input').bind('click.123',function(){

       alert('123');

  })

  $('input').bind('click.abc',function(){

       alert('abc');

  })

  $('input').bind('mouseover.123',function(){

  alert('abc'); 

  })

  $('input').unbind('.123');  //去掉所有以.123的命名空间

 

C、事件委托：.live()  .delegate()
，事件委托可以提高效率

解除事件委托 .die()  .undelegate()

D、.on()  .off() .one()

  $('input').on({

  mouseover:function(){

    alert('鼠标移入');

  },

  mouseout:function(){

       alert('鼠标移出');

   }

  })

 

11、动画效果

A、显示.show()、隐藏.hide()、淡入、淡出、卷入、卷出

* $('.show').click(function(){

       $('#box').show();

 })

 $('.hide').click(function(){

       $('#box').hide();

 })

* $('.show').click(function(){

       $('#box').show('slow');

 })

 $('.hide').click(function(){

       $('#box').hide('normal');

 })

//三个参数slow  normal  fast分别对应600 400 200毫秒