JQuery_事件

来源:互联网 发布:淘宝退款发空包教程 编辑:程序博客网 时间:2024/06/05 00:57

1. 页面加载完毕事件
 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中,通常使用Window.onload方法,在JQuery中使用$(document).read方法。

方法 执行时机 编写个数 简化写法 window.onload() 必须等待网页中的所有内容加载完毕后(包括图片)才能执行 不能编写个数 无 $(document).ready() 网页中的所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 能同时编写多个 $()

 
2. 事件绑定
 我们除了可以直接为页面增加事件,也可以利用bind()为元素来绑定事件。
语法:bind(type,[data],fn)

参数 作用 type 含有一个或者多个事件类型的字符串。 data 作为event.data属性值传递给事件对象的额外数据对象。 fn 绑定到每个匹配元素的事件上面的处理函数。

 type参数提供可以绑定的事件有:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

3. 事件解绑
 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。这是解绑所有的事件。  例如:$("input").click(function(){
$("#panel h5.head").unbind("mouseout");
})

4. 移除指定事件指定函数

<script language="JavaScript">  $(function(){     function event(){     var $content = $(this).next("div.content");     if($content.is(":visible")){        $content.hide();     }else{        $content.show();     }     }     $("#panel h5.head").bind("click",event)     $("input").click(function(){       $("#panel h5.head").unbind("click",event);     })  })</script>

5. 事件切换hover()
 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。

<!--例子--><script language="JavaScript">    $(function(){        $("#panel h5.head").hover(function(){            $(this).next("div.content").show();        },function(){            $(this).next("div.content").hide();           })    })  </script>

6. 事件切换:toggle()
 每次点击后依次调用函数。

<!--例子--> <script language="JavaScript">    $(function(){        $("#panel h5.head").toggle(function(){        $(this).next("div.content").show();        },function(){        $(this).next("div.content").hide();        })    })  </script>
原创粉丝点击