jQuery中的事件

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_34319111

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量37

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/talk/archive/2011/04/02/2003092.html

事件绑定函数：bind(type, [, data], fn);

3个参数说明如下：

type:

blur: 元素失去焦点 a, input, textarea, button, select, label, map, area

focus：元素获得焦点 a, input, textarea, button, select, label, map, area

load: 某个页面或图像完成加载。window, img

resize: 窗口或框架被调整尺寸. window, iframe, frame

scroll: 滚动文档的可视部分。window

unload: 用户退出页面。window

click:点击事件。

dbclick:双击事件

mousedown:鼠标按键被按下。

mouseup:鼠标按键弹起。

mousemove:鼠标移动

mouseover:鼠标移入某元素，会形成事件冒泡

mouseout:鼠标移出某元素，会形成事件冒泡

mouseenter:鼠标移入某元素，不会形成事件冒泡

mouseleave:鼠标移出某元素，不会形成事件冒泡

change: 用户改变域的内容。input ,textarea, select

select: 文本被选定。document,input,textarea

submit:提交。

keydown:按键被按下

keypress:按键被按下或按住。

keyup: 按键弹起

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

第三个参数则是用来绑定的处理函数

<div id="panel">
  <h5 class="head">什么是jquery</h5>
  <div class="content">
       jQuery是继.........
  </div>
</div>

绑定单击事件

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

加强效果，使用jQuery中的is()方法来判断元素是否显示。jQuery代码如下：

$function(){
  $("#panel h5.head").bind("click", function(){
     if($(this).next("div.content").is(":visible")){
   $(this).next("div.content").hide(); }
   else{
   $(this).next("div.content").show();
}
})
}

合成事件 hover(enter, leave)

用途：用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter),当移出元素时会触发第二个函数(leave)

$function(){
  $("#panel h5.head").hover(
    function(){$(this).next("div.content").hide(); }
    ,function(){
   $(this).next("div.content").show();
})
}

合成事件 toggle(fn1, fn2,...fnN)

用途：用于模拟鼠标连续单击事件。当第一个单击元素时，触发第一个函数，第二次触发第二个函数，然后循环。

$function(){
  $("#panel h5.head").toggle(
    function(){$(this).next("div.content").show(); }
    ,function(){
   $(this).next("div.content").hide();
})
}

toggle()还可用于切换元素的可见状态：

$function(){
  $("#panel h5.head").toggle(
    function(){$(this).next("div.content").toggle(); }
    ,function(){
   $(this).next("div.content").toggle();
})
}

转载于:https://www.cnblogs.com/talk/archive/2011/04/02/2003092.html