jQuery Basic Event Handling

Load, unload, ready events
//triggered when DOM is loaded
$(document).ready(function(){
  // run code
});

//triggered when page is fully loaded(including all assets)
$(window).load(function () {
  // run code
});

//triggered when leaving a page
$(window).unload(function () {
  // run code
});
 
 
Common events, Focus, Blur, Click, Change, Keydown, Keyup
$("#ele").click(function(){  //register a onclick event to ele
  //your code
});

$("#ele").focus(function(){  //register a onfocus event to ele
  //your code
});
.....
ExampleCommon events, Focus, Blur, Click, Change, Keydown, Keyup
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<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>

<!-- HTML -->
<a name="#focus-blur-click-change-keydown-keyup-event"></a>
<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>



Mouse events, MouseDown, MouseUp, MouseCenter, MouseLeave, MouseMove, MouseOut, MouseOver, Hover
$("#ele").mousedown(function(){  //register a mousedown event to ele
  //your code
});

$("#ele").mousemove(function(){  //register a mousemove event to ele
  //your code
});

...
ExampleMouse events, MouseDown, MouseUp, MouseCenter, MouseLeave, MouseMove, MouseOut, MouseOver, Hover
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<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>

<!-- HTML -->
<a name="#mouse-event"></a>
<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>



comments powered by Disqus