jQuery常用Event-API

jQuery常用Event-API

目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理

• window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者 (这是传统加载内容的办法)

• ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用 $(函数) 简化
  NT： ready和onload同时存在时，二者都会触发执行，ready快于onload

example: 
        $(function(){
            alert("jQuery加载web页面");
        });

• change：当内容改变时触发
  example：

        //当<select>标签触发onchange事件
        $("#selectID").change( function(){ 
            var $option = $("#city option:selected");
            var value = $option.val();
            var text = $option.text();
            alert(value+":"+text);
        } );

• focus：焦点获取
  example：

    <input type="text" value="加载页面时获取光标并选中所有文字" size="50"/> 
    <script type="text/javascript">
        //加载页面时获取光标并选中所有文字
        $(function(){
            //光标定位文本框
            $(":text").focus();
            //选中文本框的所有文本
            $(":text").select();
        });
    </script>

• blur：焦点失去

• select：选中所有的文本值 -> 看上面

• keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
  example：

        //当按键弹起时，显示所按键的unicode码

        $(function(){
            //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
            $(document).keyup(function(){
                //获取按钮的unicode编码
                var code = event.keyCode; 
                alert(code);
            });
        });

• mousemove：在指定区域中不断移动触发

        $(function(){
            $(document).mousemove(function(){    //指定在浏览器内移动
                //获取当前鼠标的坐标
                var x = event.clientX;
                var y = event.clientY;

            });     
        });

• mouseover：鼠标移入时触发

        //鼠标移到某行上，某行背景变色
        $("table tr").mouseover(function(){
            $(this).css("background-color","inactivecaption");
        }); 

• mouseout：鼠标移出时触发

• submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
  -> 用于表单提交前检测

    $(form).submit(function(){   });

• click：单击触发
• dblclick：双击触发