jQuery学习之事件

一,加载DOM

      JavaScript中会使用window.onload,而在jQuery中则会使用$(document).ready()方法

      这两个方法有什么不同呢?

      1.执行时机不同,对于window.onload方法是在网页所有的元素(包括元素的所有关联文件)完全

       加载到浏览器后才执行;而$(document).ready()则是在DOM载入就绪时,就可以被调用,例如

       很可能图片还未加载完毕

      2.多次使用,$(document).ready()可以多次使用

      3.简写方式,$(function(){}) 或者$().ready(function(){})

二,事件绑定

  在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bing()方法来匹配元素进行特定

事件绑定,bind()方法的调用格式:

 bind(type ,[data] ,fn);

$(function(){

     $("#panel h5.head").bind("click",function(){

                         $(this).next().show();        //$(this).next():获取“内容”元素

})

})

改变绑定事件类型:

$(function(){

      $("#panel h5.head").bind("mouseover",function(){

               $(this).next().show();        

     }).bind("mouseout",function(){

               $(this).next().hide(); 

})

})

简写绑定事件:

$(function(){

      $("#panel h5.head").bind("mouseover",function(){

               $(this).next().show();        

     }).mouseout(function(){

               $(this).next().hide(); 

})

})

三,合成事件

1.hover()  模拟光标悬停时间

$(function(){

      $("#panel h5.head").hover(function(){

               $(this).next().show();        

     }).function(){

               $(this).next().hide(); 

})

})

2,toggle() 模拟连续单击事件

//如果元素是隐藏的,单击切换为显示;如果显示的,切换为隐藏的

$(function(){

      $("#panel h5.head").toggle(function(){

               $(this).next().toggel();        

     }).function(){

               $(this).next().toggel(); 

})

})

四,时间冒泡

1,什么是冒泡呢?

答: 假设网页上有两个元素,一个元素嵌套在另一个元素之中,并且都绑定了click事件,事件会按照从里到外(dom的层次结构)

像水泡一样的向上直至顶端。

2,停止事件冒泡

$('span').bind("click",function(event){

     var txt=$('#msg').html()+"<p>内层span元素</p>");

      $('#msg').html(txt);

   event.stopPropagation();   //停止事件冒泡

3,阻止默认行为

  例如,超链接跳转,单击“提交"按钮后表单会提交

 必要时,可以使用preventDefault()方法来阻止。

五,事件对象的属性

1,event.type 获取事件类型

$('a').click(function(event){

   alert(event.type);//获取事件类型

   return false;//组织链接跳转

});  //click

2,event.preventDefault()

3,event.stopProgation()

4,event.target  获取触发事件的元素

$(“a[href=' http://google.com']").click(function(event){

   var tg=event.target;//获取事件对象

   alert(tg.href);

   return false;//组织链接跳转

});  //click

5,event.relatedTarget 访问相关元素

6,event.pageX和event.pageY 获取光标相对于页面的x和y坐标

IE中:event.x     Firefox:event.pageX

7,event.which 获取鼠标单击事件中的左,中,右;键盘事件中,获取键盘的按键

$("a"),mousedown(function(e){

  e.which;//1,左;2,中,3,右

})

$("input"),keyup(function(e){

  e.which;

})

8,event.metaKey 获取<ctrl>按键

六,移除事件

1,移除按钮元素上以前注册的事件

$('#btn').unbind("click");

2,移除按钮其中一个事件

$('#delTwo').unbind("click",myFun2);

七,操作模拟

trigger()

原文地址:https://www.cnblogs.com/fnncat/p/4885828.html