jQuery学习第五课(jquery中的事件和事件对象)


jquery 中的事件和事件对象

1.加载文档事件

2.鼠标事件

3.键盘事件

4.表单事件

5.浏览器事件

6.事件对象

7.绑定事件的方法

8.移除事件的方法

9.事件冒泡(略)

10.事件命名空间




加载文档事件

a. ready()

b. $.holdReady(bool)暂停或恢复ready事件

c. load(),unload() 1.8中移除




鼠标事件

click()单击左键事件

dblclick()双击左键事件

focusin()获得焦点事件,可作用于父级

focusout()失去焦点事件,可作用于父级

mousedown()鼠标按下事件,和click()有区别

mouseup()鼠标抬起事件

mousemove(),鼠标移动事件

mouseover()鼠标进入事件

mouseout()鼠标离开事件

mouseenter()鼠标进入事件

mouseleave()鼠标离开事件

hover()同时绑定mouseentermouseleave事件

<body>
 <p>这是P标签</p>

 <div>
  <input type="text" name="" id="" value="123456" />
  <span style="display:none">已获取焦点</span>
  <!-- <p><input type="text" value="654321" /></p>
  <p><em><input type="text" value="abcdef" /></em></p> -->
 </div>
 <script>

  //当鼠标左键按下,然后再抬起鼠标左键,才算完成一次click事件
  /*$('p').click(function(){
   alert($(this).text());
  });*/

  /*$('p').dblclick(function(){
   alert($(this).text());
  });*/

  /*$('div').focusin(function(){
   $(this).children('span').show();
  });*/

  /*$('input').focusin(function(){
   $('span').show();
  });*/

  /*$('p').mousedown(function(){
   alert($(this).text());
  });*/

  /*$('p').mouseup(function(){
   alert($(this).text());
  });*/
  
  /*$(document).mousemove(function(e){
   var x = e.pageX;
   var y = e.pageY;
   $('input').val(x+','+y);
  });*/

  /*$('p').mouseover(function(){
   $(this).css('background','red');
  }).mouseout(function(){
   $(this).css('background','none');
  });*/

  $('p').mouseenter(function(){
   $(this).css('background','red');
  });

  $(document).mouseleave(function(){
   $('p').css('background','none');
  });

 </script>
</body>

-----------------------------------------------hover------------------------------------

<body>
 <p>P标签</p>
 <script>
  //hover是模拟鼠标进入(mouseenter)和鼠标(mouseleave)离开的事件
  //hover(fn1,fn2);
  $('p').hover(function(){
   $(this).css('background','red');
  },function(){
   $(this).css('background','none');
  });
 </script>
</body>

键盘事件

a. keydown()键盘按下事件

b. keyup()键盘弱起事件

c. keypress()类似与keydown()但有区别

<body>
 <input type="text" value="text" />
 <script>
  $('input').keydown(function(){
   alert($(this).val());
  });

  /*$('input').keyup(function(){
   alert($(this).val());
  });*/

  /*$('input').keypress(function(){
   alert($(this).val());
  });*/
 </script>
</body>



表单事件

focus()获得焦点事件

blur()失去焦点事件

change()表单值改变事件

select()表单元素被选中时的事件,只能用于Input[text]textarea

submit()表单提交事件

<body>
 <!-- <input type="text" name="" id="" value="11111" /> -->
 <input type="password" name="" id="" value="11111" />
 <!-- <input type="file" name="" id="" /> -->
 <textarea name="" id="" cols="30" rows="10">1231231212213</textarea>
 <span style="display:none">asdasdfsdf</span>
 <script>
 /* $('input').focus(function(){
   $('span').show();
  });

  $('input').blur(function(){
   $('span').hide();
  });*/
  
  //当有focus事件的元素里面的值改变的时候,并且触发了blur事件,才算完成一次change事件
  /*$('input[type=file]').change(function(){
   $('span').show();
  });*/

  /*$('input').select(function(){
   $('span').show();
  });*/

  /*$('textarea').select(function(){
   $('span').show();
  });*/
 </script>
</body>



浏览器事件

a. resize()浏览器窗口改变大小事件

b. scroll()浏览器滚动条移动时发生的事件

c. error() 1.8中废弃

<body style="height:3000px">
 <script>
  /*$(window).resize(function(){
   alert('浏览器窗口已改变!');
  });*/

  $(window).scroll(function(){
   $('body').append('<div>滚动条位置发生偏移</div>');
  });
 </script>
</body>

事件对象

event.pageX获取鼠标相对于文档的x轴坐标

event.pageY获取鼠标相对于文档的Y轴坐标

event.preventDefault()阻止浏览器默认行为

event.stopPropagation()阻止冒泡

event.which监听键盘输入和鼠标操作

其它略

<body style="height:3000px;width:3000px">
 <input type="text" style="position:fixed;top:10px;left:10px" />
 <script>
  $(document).click(function(e){
   var x = e.pageX;
   var y = e.pageY;
   $('input').val(x+','+y);
  });
 </script>
</body>

<body>
 <form action="
http://www.zixue.it" id="form1">
  <input type="text" value="11111" name="username" />
  <input type="password" value="22222" name="password" />
  <input type="submit" value="提交" />
 </form>
 <script>
  $('#form1').submit(function(e){
   alert('提交成功!!');
   e.preventDefault();
  });
 </script>
</body>

绑定和移除事件的方法

bind()绑定事件

unbind()移除事件

on()绑定事件

off()移除事件

one()执行一次事件,然后销毁该事件

delegate()虽然未被废弃,但官方推荐使用on()代替

undelegate()off代替

<body style="height:3000px">
 <p>这是P标签</p>
 <script>
  /*$('p').click(function(){
   alert($(this).text());
  });*/

  

  /*$('p').bind('click',function(){
   alert($(this).text());
  });
  $('p').mouseover(function(){
   $(this).css('background','red');
  });

  $('p').unbind('click mouseover');*/

  /*$('p').one('click',function(){
   alert($(this).text());
  });*/

  /*$('body').delegate('p','click',function(){
   $(this).append('<p>我是新增加的P标签<p>');
  });*/

  $('body').on('click','p',function(){
   $(this).append('<p>我是新增加的P标签<p>');
  });

 </script>
</body>


事件命名空间

<body>
 <p>我是P标签</p>
 <script>
  //第一个开发人员,给p标签添加click事件,使它的背景颜色变成红色
  /*$('p').click(function(){
   $(this).css('background','red');
  });*/

  //第二个开发人员,给P标签添加click事件,使它的文本颜色变成蓝色
 /* $('p').click(function(){
   $(this).css('color','blue');
  });*/

  //第三个开发人员,不想让P标签在点击的时候添加红色的背景,只想让P标签里的文本颜色变成蓝色,那么他用unbind方法把P标签上的click事件给移除了
  /*$('p').unbind('click');*/

  $('p').bind('click.background',function(){
   $(this).css('background','red');
  });

  $('p').bind('click.color',function(){
   $(this).css('color','blue');
  });

  $('p').unbind('click.color');

  
 </script>
</body>

jquery

中的事件补遗

trigger()事件,模拟事件发生

triggerHandler()事件,模拟事件发生,能阻止冒泡

live(),die()已经废弃

toggle()事件已经废弃

事件绑定的优化

-----------------------trigger----------------------------------

<body>
 <a href="###">点击</a>
 <script>
  $('a').click(function(){
   alert('我被点击了');
  });
  $('a').mouseover(function(){
   alert('鼠标已进入');
  });
  $('a').trigger('mouseover');
 </script>
</body>

-----------------triggerHandler--------------------------

<body>
 <p>
  <a href="###">点击</a>
 </p>
 <script>
  $('a').click(function(){
   alert('a元素被点击了');
  });

  $('p').click(function(){
   alert('p元素被点击了');
  });

  // $('a').trigger('click');
  $('a').triggerHandler('click');
  
 </script>
</body>





你可能感兴趣的:(jquery)