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后面的感叹号
        });