JavaScript事件详解

来源：互联网发布：码云的独立域名编辑：程序博客网时间：2024/06/10 00:32

javascripte是基于对象的语言，而基于对象的基本特征就是采用事件驱动。正是有了js的各种事件，才有了我们与网页的多样化的交互。这次我们一起来总结一下js的常用事件。

1、onClick事件

将函数绑定到click事件

<strong><span style="font-size:18px;">    $("button").click(function(){      $("p").slideToggle();    });</span></strong>

2、change事件

被选元素的change事件发生时运行的函数

<strong><span style="font-size:18px;">    $(".field").change(function(){       $(this).css("background-color","#FFFFCC");    });</span></strong>

3、Select事件

文本框类型的元素的文本被选中时，触发的事件

<strong><span style="font-size:18px;">    $("input").select(function(){       $("input").after(" Text marked!");    })</span></strong>

4、foucs事件

文本框或选择框获得光标时触发事件

<strong><span style="font-size:18px;">    $("input").focus(function(){      $("input").css("background-color","#FFFFCC");    });</span></strong>

5、load事件

加载时触发事件

<strong><span style="font-size:18px;">    $("img").load(function(){      $("div").text("图像已加载");    });</span></strong>

6、unload事件

离开本页时触发事件

<strong><span style="font-size:18px;">    $(window).unload(function(){      alert("再见！");    });</span></strong>

7、blur事件

输入域失去焦点时触发事件

<strong><span style="font-size:18px;">    $("input").blur(function(){      $("input").css("background-color","#D6D6FF");    });</span></strong>

8、mouseover事件

鼠标指针位于元素上方时触发事件

<strong><span style="font-size:18px;">    $("p").mouseover(function(){       $("p").css("background-color","yellow");    });</span></strong>

9、mouseout事件

鼠标从元素上移开时，触发的事件

<strong><span style="font-size:18px;">    $("p").mouseout(function(){      $("p").css("background-color","#E9E9E4");    });</span></strong>

这次回顾这些事件，因为会经常用到，其实所有的这些事件的整理工作早就有人帮我们整理好了，站在巨人的肩膀上。了解更多

0 0