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      
        });