English | 正體中文 | 简体中文

jQuery 基本事件处理


Load, unload, ready events
//当文件载入完成时会触发此事件
$(document).ready(function(){
  // 在这执行程式
});

//当页面完全载入时会触发此事件(包括图片、javascript等)
$(window).load(function () {
  // 在这执行程式
});

//当要离开页面时会触发此事件
$(window).unload(function () {
  // 在这执行程式
});




常用事件名称 Focus, Blur, Click, Change, Keydown, Keyup
$("#ele").click(function(){  //在ele元素上注册onclick事件
  //你的程式码
});

$("#ele").focus(function(){  //在ele元素上注册onfocus事件
  //你的程式码
});
.....

范例
Click Event :
Focus and Blur Event :
Keydown, keyup Event :
Change Event :

范例程式码Expand
<!-- HTML -->
<div id="example-section21">        
     Click Event : <input id="event1" value="click on me" style="width:300px"/>
     <span id="result1" style="display:none;color:blue">
     onclick event triggered!</span>
     <br>
     Focus and Blur Event : 
     <input id="event2" value="click me and click somewhere else"  style="width:300px"/>
     <span id="result2" style="display:none;color:blue">onfocus event triggered!</span>
     <span id="result2_1" style="display:none;color:blue">onblur event triggered!</span>
     <br>     
     Keydown, keyup Event : 
     <input id="event3" value="type something here"  style="width:300px"/>
     <span id="result3" style="display:none;color:blue">onkeydown event triggered!</span>
     <span id="result4" style="display:none;color:blue">onkeyup event triggered!</span>
     <br>
     Change Event : 
     <input id="event5" value="change the value here"  style="width:300px"/>
     <span id="result5" style="display:none;color:blue">onchange event triggered!</span>
     <br>     
     <button type="button" id="btn211">Reset</button>    
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var interval = 2000;

$(document).ready(function (){
    $("#event1").bind("click", function(){            
        $("#result1").show().fadeOut(interval);
    });

    $("#event2").focus(function(){            
        $("#result2").show().fadeOut(interval);
        $("#result2_1").hide();
    });

    $("#event2").blur(function(){            
        $("#result2").hide();
        $("#result2_1").show().fadeOut(interval);
    });

    $("#event3").keydown(function(){            
        $("#result3").show();
        $("#result4").hide();
    });

    $("#event3").keyup(function(){            
        $("#result3").hide();
        $("#result4").show();
    });

    $("#event5").change(function(){                    
        $("#result5").show().fadeOut(interval);
    });

    $("#btn211").click(function(){
       $("#example-section21 span[id^='result']").hide();
    });
});
</script>



滑鼠常用事件名称
Mouse events, MouseDown, MouseUp, MouseCenter, MouseLeave, MouseMove, MouseOut, MouseOver, Hover

$("#ele").mousedown(function(){  //在ele元素上注册mousedown事件
  //your code
});

$("#ele").mousemove(function(){  //在ele元素上注册mousemove事件
  //your code
});

...

EXAMPLE
点我
将滑鼠移入再移出
用滑鼠滑过我
用滑鼠在我上方滑动


范例程式码Expand
<!-- HTML -->
<style>
  #example-section22 div {
    float:left;width:100px;height:100px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section22">
    <div id="div221">Click me</div>    
    <div id="div222">Move mouse in and out</div>    
    <div id="div223">Slide over me</div>    
    <div id="div224">Move mouse over me<br><span></span></div>    
    <br style="clear:both"/>
    <span id="span229"></span>
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){
    $("#div221").bind("mousedown mouseup", function(e){        
        $("#span229").html(e.type + " triggered!")
    });

    $("#div222").bind("mouseout mouseover", function(e){        
        $("#span229").html(e.type + " triggered!")
    });

    $("#div223").hover(function(){
        $(this).css("background-color", "orange");
        $(this).html("Slide over me<br>hover triggered!");
    }, function(){
        $(this).css("background-color", "");
        $(this).html("Slide over me");
    });

    $("#div224").mousemove(function(e){        
        $(this).find("span")
        .html("mousemove triggered!<br>x, y = " + e.clientX + "," + e.clientY)
    });

    $("#btn82").click(function(){
        $("#example-section8 .general").css("background-color", "");
        $("#example-section8 .special").css("background-color", "orange");
    });
});
</script>


© 2012 PureExample.com contact