javascript之jquery 事件

执行时机

var startTime = new Date().getTime();$(document).ready(function(){        test1();        })function test1(){    var endTime2  = new Date().getTime();     var a = endTime2 - startTime;    $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");}function test2(){    var endTime1  = new Date().getTime();    var b = endTime1 - startTime;    $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");}

$(document)也可以简写成$()

DOM准备

使用$().ready()注意很可能大量的图片未加载完,此时的图片的高度和宽度的属性不一定有效,可以使用load方法,绑定在window上,则会在所有内容加载完毕后触发

$(window).load(function(){});

绑定在元素上,则会在元素的内容加载完毕后触发.

document.getElementById("panel").onclick=function(){    alert( "元素已经加载完毕 !");}/*   执行错误，为什么？   因为dom还未加载完毕。 */document.getElementById("panel").onclick=function(){    alert( "元素已经加载完毕 !");}/*正确执行*/window.onload = function(){    document.getElementById("panel").onclick=function(){        alert( "元素已经加载完毕 !");    }}$(document).ready(function(){        document.getElementById("panel").onclick=function(){        alert( "元素已经加载完毕 !");        }        })function one(){    alert("one");}function two(){    alert("two");} window.onload = one ;window.onload = two ;function one(){    alert("one");}function two(){    alert("two");} $(document).ready(function(){        one();        })$(document).ready(function(){        two();        })

事件绑定

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

合成事件

$("#panel h5.head").hover(function(){        $(this).next().show();        },function(){        $(this).next().hide();           })$("#panel h5.head").toggle(function(){        $(this).next().show();        },function(){        $(this).next().hide();        })$("#panel h5.head").toggle(function(){        $(this).next().toggle();        },function(){        $(this).next().toggle();        })$("#panel h5.head").toggle(function(){        $(this).addClass("highlight");        $(this).next().show();        },function(){        $(this).removeClass("highlight");        $(this).next().hide();        });

事件冒泡

// 为span元素绑定click事件$('span').bind("click",function(){        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";        $('#msg').html(txt);        });// 为div元素绑定click事件$('#content').bind("click",function(){        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";        $('#msg').html(txt);        });// 为body元素绑定click事件$("body").bind("click",function(){        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";        $('#msg').html(txt);        });// 为span元素绑定click事件$('span').bind("click",function(event){        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";        $('#msg').html(txt);        event.stopPropagation();    //  阻止事件冒泡        });// 为div元素绑定click事件$('#content').bind("click",function(event){        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";        $('#msg').html(txt);        event.stopPropagation();    //  阻止事件冒泡        });// 为body元素绑定click事件$("body").bind("click",function(){        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";        $('#msg').html(txt);        });$("#sub").bind("click",function(event){        var username = $("#username").val();  //获取元素的值        if(username==""){     //判断值是否为空        $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息        event.preventDefault();  //阻止默认行为 ( 表单提交 )        }        })$("#sub").bind("click",function(event){        var username = $("#username").val();  //获取元素的值        if(username==""){     //判断值是否为空        $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息        return false;        }        })// 为span元素绑定click事件$('span').bind("click",function(event){        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";        $('#msg').html(txt);        return false;        });// 为div元素绑定click事件$('#content').bind("click",function(event){        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";        $('#msg').html(txt);        return false;        });// 为body元素绑定click事件$("body").bind("click",function(){        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";        $('#msg').html(txt);        });

事件对象的属性

$("a").click(function(event) {        alert(event.type);//获取事件类型        return false;//阻止链接跳转        });$("a[href='http://google.com']").click(function(event) {        var tg = event.target;  //获取事件对象        alert( tg.href ) ;        return false;//阻止链接跳转        });$("a").click(function(event) {        alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标        return false;//阻止链接跳转        });$("a").mousedown(function(e){        alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键        return false;//阻止链接跳转        })$("input").keyup(function(e){        alert(e.which);        })$("input").keyup(function(e){        alert( e.metaKey +" "+e.ctrlKey );        $(this).blur();        })

移除事件

$(function(){        $('#btn').bind("click", function(){            $('#test').append("<p>我的绑定函数1</p>");            }).bind("click", function(){                $('#test').append("<p>我的绑定函数2</p>");                }).bind("click", function(){                    $('#test').append("<p>我的绑定函数3</p>");                    });        })$(function(){        $('#btn').bind("click", function(){            $('#test').append("<p>我的绑定函数1</p>");            }).bind("click", function(){                $('#test').append("<p>我的绑定函数2</p>");                }).bind("click", function(){                    $('#test').append("<p>我的绑定函数3</p>");                    });        $('#delAll').click(function(){            $('#btn').unbind("click");            });        })$(function(){        $('#btn').bind("click", myFun1 = function(){            $('#test').append("<p>我的绑定函数1</p>");            }).bind("click", myFun2 = function(){                $('#test').append("<p>我的绑定函数2</p>");                }).bind("click", myFun3 = function(){                    $('#test').append("<p>我的绑定函数3</p>");                    });        $('#delTwo').click(function(){            $('#btn').unbind("click",myFun2);            });        })$(function(){        $('#btn').one("click", function(){            $('#test').append("<p>我的绑定函数1</p>");            }).one("click", function(){                $('#test').append("<p>我的绑定函数2</p>");                }).one("click", function(){                    $('#test').append("<p>我的绑定函数3</p>");                    });        })

模拟操作

$(function(){        $('#btn').bind("click", function(){            $('#test').append("<p>我的绑定函数1</p>");            }).bind("click", function(){                $('#test').append("<p>我的绑定函数2</p>");                }).bind("click", function(){                    $('#test').append("<p>我的绑定函数3</p>");                    });        $('#btn').trigger("click");        })$(function(){        $('#btn').bind("myClick", function(){            $('#test').append("<p>我的自定义事件.</p>");            });        $('#btn').click(function(){            $(this).trigger("myClick");            }).trigger("myClick");        })$(function(){        $('#btn').bind("myClick", function(event, message1, message2){            $('#test').append( "<p>"+message1 + message2 +"</p>");            });        $('#btn').click(function(){            $(this).trigger("myClick",["我的自定义","事件"]);            }).trigger("myClick",["我的自定义","事件"]);        })$(function(){        $('#old').bind("click", function(){            $("input").trigger("focus");            });        $('#new').bind("click", function(){            $("input").triggerHandler("focus");            });        $("input").focus(function(){            $("body").append("<p>focus.</p>");            })        })

其他用法

$(function(){        $("div").bind("mouseover mouseout", function(){            $(this).toggleClass("over");            });        })$("div").bind("click.plugin",function(){        $("body").append("<p>click事件</p>");        });$("div").bind("mouseover.plugin", function(){        $("body").append("<p>mouseover事件</p>");        });$("div").bind("dblclick", function(){        $("body").append("<p>dblclick事件</p>");        });$("button").click(function() {        $("div").unbind(".plugin");          })/*   click,mouseover 事件被删除， */$("div").bind("click",function(){        $("body").append("<p>click事件</p>");        });$("div").bind("click.plugin", function(){        $("body").append("<p>click.plugin事件</p>");        });$("button").click(function() {        $("div").trigger("click!");    // 注意click后面的感叹号        });