- Click() Events:
$('li').click(function(event){ alert("Hello World"); }); |
$('li').on('click', function(event){ alert("Hello World"); }); |
2) Hover() Event:
$('img').on('hover', function(event){ alert("Hello World"); }); |
Document Loading
- ready() Event:
$(document).ready(function(){ $("button").click(function(){ alert("thanks for clicking"); }); });
Browser Events
- resize() Events:
$(window).resize(function(){ alert("Your Windows Resizing"); });
2. Scroll() Events:
$("div").scroll(function(){ alert("scrolled"); });
Form Events
- blur() Event:
$("input").blur(function(){ alert("This input field has lost its focus."); });
2. change() Event:
$("input").change(function(){ alert("The text has been changed."); });
3. focus() Event:
$("input").focus(function(){ $("span").css("display", "inline").fadeOut(2000); }); <span>Nice to meet you!</span>
4. select() Event:
$("input").select(function(){ alert("Text marked!"); });
5. submit() Event:
$("form").submit(function(){ alert("Submitted"); });
Keyboard Events
1. focusin() Event:
$("input").focusin(function(){ alert("Your focus in input field"); });
2. focusout() Event:
$("input").focusout(function(){ alert("your focus is now not in input field"); });
3. keydown() Event:
$("input").keydown(function(){ $("input").css("background-color", "yellow"); });
4. keypress() Event:
i = 0; $(document).ready(function(){ $("input").keypress(function(){ $("span").text(i += 1); }); }); <!-- // for html--> Enter your name: <input type="text"> <p>Keypresses: <span>0</span></p>
5 keyup() Event:
$("input").keyup(function(){ $("input").css("background-color", "pink"); });