jQuery(4)--jQuery中的事件

加载DOM

$(document).ready() 在DOM载入就绪时就对其进行操作，并调用执行它所绑定的函数

$(document).ready(function(){

})

简写方式：

 $(function(){

 })
 或
 $().ready(function(){  //$()不带参数时，参数就是document
  
 })

事件绑定  bind()

bind(type,[data],fn)

3个参数说明

type---事件类型，包括blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、             keydown、keypress、keyup、error.......

[data]---可选参数，作为event.data属性值传递给事件对象的额外数据对象

fn---用来绑定的处理函数

$(function(){
  $("#panel h5").bind(click,function(){
     $(this).next().show();
   })
})

简写：

$(function(){
  $("#panel h5").click(function(){
     $(this).next().show();
   })
})

事件合成

(1) hover(enter,leave)  用于模拟光标悬停事件，mouseover()和mouseout()事件结合。当光标移动到元素上时，触发enter函数；当光标移除这个元素时，触发leave函数 

//鼠标移入移除切换是否可见
$(function(){
  $("#panel h5").hover(function(){
     $(this).next().show();
   }),function(){
 $(this).next().hide();
}
})

 

(2)toggle(fn1,fn2,...fnN)  用于模拟鼠标连续单击事件   第一次单击元素，触发第一个函数；第二次单击，触发第二个函数；依次触发，直到最后一个。随后的每次单击都是轮番调用这几个函数
toggle() 可以切换元素的可见状态   若元素可见，单击后隐藏；若元素隐藏，单击后可见

//单击切换是否可见
$(function(){
  $("#panel h5").togle(function(){
     $(this).next().show();
   }),function(){
 $(this).next().hide();
}
})

事件冒泡

 事件冒泡：事件会按照DOM的层次结构像水泡一样不断向上直至顶端。比如span元素嵌套在div元素中，当span元素被单击时，也单击了div元素；如果span和div都绑定有click事件，会依次执行

 阻止事件冒泡，用event.stopPropagation()

//当单击span时，只会触发span的click事件，不会触发div的click事件

$("span").click(function(event){

var txt="<p>内层span元素被单击</p>";

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

event.stopPropgation()    //停止事件冒泡  可用return false 代替

})；

事件对象及其属性

   在程序中使用事件对象，只需要为函数添加一个参数

//单击element元素时，event对象就被创建了。这个事件只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁

$("element").click(function(event)           //event:事件对象

//......

)

   事件对象常用属性

event.type   //获取事件类型

event.preventDefault()  //阻止默认的事件行为  如点击表单提交按钮时阻止表单提交、单击链接时阻止跳转等  可用return false代替

event.stopPropagation()  //阻止事件冒泡 可用return false代替

event.target  //获取到触发事件的元素

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

移除事件 unbind()

unbind([type],[data]);   第一个参数是事件类型，第二个参数是将要移除的函数

(1)如果没有参数，则删除所有绑定的时间

(2)如果提供了事件类型做参数，则只删除该类型的绑定事件

(3)如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

       对于只需触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法---one()