JavaScript事件详解

    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>

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