Friday, April 30, 2010

Jquery Events

These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

.bind()
Description: Attach a handler to an event for the elements.
$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

Multiple Events

Multiple event types can be bound at once by including each one separated by a space:

$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); }); 

.blur()

Description: Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

<form>
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div id="other">
  Trigger the handler
</div>
The event handler can be bound to the first input field:
$('#target').blur(function() {
  alert('Handler for .blur() called.');
});

.change()

Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

 The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>
 

.click()

Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.


<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>
</body>
</html>
 

.dblclick( handler(eventObject) )

Description: Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. 

<!DOCTYPE html>
<html>
<head>
  <style>

  div { background:blue;
        color:white;
        height:100px;
        width:150px;
 }
  div.dbl { background:yellow;color:black; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div></div><span>Double click the block</span>
<script>
    var divdbl = $("div:first");
    divdbl.dblclick(function () { 
      divdbl.toggleClass('dbl'); 
    });

</script>
</body>
</html>
 
 

.delegate( selector, eventType, handler )

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Click me!</p>

  <span></span>
<script>
    $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>
</body>
</html>
 

.die()

Description: Remove all event handlers previously attached using .live() from the elements. 

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>

<div style="display:none;">Click!</div>
<script>

function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("#theone").live("click", aClick)
              .text("Can Click!");
});
$("#unbind").click(function () {
  $("#theone").die("click", aClick)
              .text("Does nothing...");
});

</script>
</body>
</html>
 

.error()

Description: Bind an event handler to the "error" JavaScript event.

$('#book').error(function() {
  alert('Handler for .error() called.')
});

event.currentTarget

Description: The current DOM element within the event bubbling phase.  

$("p").click(function(event) {
  alert( event.currentTarget === this ); // true
});

event.data

Description: Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound.  

$("a").each(function(i) {
  $(this).bind('click', {index:i}, function(e){
     alert('my index is ' + e.data.index);
  });
});
 

event.isDefaultPrevented()

Description: Returns whether event.preventDefault() was ever called on this event object.  

$("a").click(function(event){
  alert( event.isDefaultPrevented() ); // false
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true
});

event.isImmediatePropagationStopped()

Description: Returns whether event.stopImmediatePropagation() was ever called on this event object.  

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<script>$("p").click(function(event){
  alert( event.isImmediatePropagationStopped() );
  event.stopImmediatePropagation();
  alert( event.isImmediatePropagationStopped() );
});  </script>
</body>
</html>
 

event.isPropagationStopped()

 Description: Returns whether event.stopPropagation() was ever called on this event object. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<script>$("p").click(function(event){
  alert( event.isPropagationStopped() );
  event.stopPropagation();
  alert( event.isPropagationStopped() );
});  </script>
</body>
</html>
 

event.pageX

Description: The mouse position relative to the left edge of the document.  

<!DOCTYPE html>
<html>
<head>
  <style>body {background-color: #eef; }
div { padding: 20px; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div id="log"></div>
<script>$(document).bind('mousemove',function(e){ 
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); </script>
</body>
</html>
 

event.pageY

Description: The mouse position relative to the top edge of the document.

<!DOCTYPE html>
<html>
<head>
  <style>body {background-color: #eef; }
div { padding: 20px; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div id="log"></div>
<script>$(document).bind('mousemove',function(e){ 
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); </script>
</body>
</html>
 

event.preventDefault()

Description: If this method is called, the default action of the event will not be triggered.  

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$("a").click(function(event) {
  event.preventDefault();
  $('<div/>')
    .append('default ' + event.type + ' prevented')
    .appendTo('#log');
});
</script>
</body>
</html>
 

event.relatedTarget

Description: The other DOM element involved in the event, if any.  

$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});
 

event.result

Description: This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<script>$("p").click(function(event) {
  return "hey"
});
$("p").click(function(event) {
  alert( event.result );
});  </script>
</body>
</html>
 

event.stopImmediatePropagation()

Description: Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree  

<!DOCTYPE html>
<html>
<head>
  <style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>paragraph</p>
<div>division</div>
<script>
$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // This function won't be executed
  $(this).css("background-color", "#f00");
});  
$("div").click(function(event) {
  // This function will be executed
    $(this).css("background-color", "#f00");
});</script>
</body>
</html>
 

event.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.  

$("p").click(function(event){
  event.stopPropagation();
  // do something
});
 

event.target

Description: The DOM element that initiated the event.  

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});  </script>
</body>
</html>
 

event.timeStamp

Description: This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered.  

<!DOCTYPE html>
<html>
<head>
  <style>
div { height: 100px; width: 300px; margin: 10px; 
      background-color: #ffd; overflow: auto; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div></div>
<script>
var last, diff;
$('div').click(function(event) {
  if ( last ) {
    diff = event.timeStamp - last
    $('div').append('time since last event: ' + diff + '<br/>');
  } else {
    $('div').append('Click again.<br/>');
  }
  last = event.timeStamp;
});  </script>
</body>
</html> 

event.type

Description: Describes the nature of the event.  

$("a").click(function(event) {
  alert(event.type); // "click"
}); 
 

event.which

Description: For key or button events, this attribute indicates the specific button or key that was pressed.  

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').bind('keydown',function(e){ 
  $('#log').html(e.type + ': ' +  e.which );
});  </script>
</body>
</html>
 

.focus( handler(eventObject) )

Description: Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p><input type="text" /> <span>focus fire</span></p>

<p><input type="password" /> <span>focus fire</span></p>
<script>
    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });
</script>
</body>
</html>
 

.focusin( handler(eventObject) )

Description: Bind an event handler to the "focusin" JavaScript event.

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p><input type="text" /> <span>focusin fire</span></p>
<p><input type="password" /> <span>focusin fire</span></p>
<script>
    $("p").focusin(function() {
         $(this).find("span").css('display','inline').fadeOut(1000);
    });
</script>
</body>
</html>

.focusout( handler(eventObject) )

Description: Bind an event handler to the "focusout" JavaScript event. 

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>
  <input type="text" /> 
  <span>focusout fire</span>
</p>
<p>
  <input type="password" />
  <span>focusout fire</span>
</p>
<script>
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});
    </script>
</body>
</html>
 

.hover( handlerIn(eventObject), handlerOut(eventObject) )

Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>
</body>
</html>
 

.keydown( handler(eventObject) )

Description: Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text" />
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/scripts/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keydown(function(event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
   xTriggered++;
   var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
});

$('#other').click(function() {
  $('#target').keydown();
});</script>
</body>
</html>
 

.keypress( handler(eventObject) )

Description: Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text" />
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/scripts/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keypress(function(event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
   xTriggered++;
   var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
});

$('#other').click(function() {
  $('#target').keypress();
});</script>
</body>
</html>
 

.keyup( handler(eventObject) )

Description: Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text" />
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/scripts/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keyup(function(event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
   xTriggered++;
   var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
});

$('#other').click(function() {
  $('#target').keyup();
});</script>
</body>
</html>
 

.live( eventType, handler )

Description: Attach a handler to the event for all elements which match the current selector, now or in the future.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Click me!</p>

  <span></span>
<script>
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>
</body>
</html>

 

.load( handler(eventObject) )

Description: Bind an event handler to the "load" JavaScript event.

$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});
 

.mousedown( handler(eventObject) )

Description: Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Press mouse and release here.</p>

<script>
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

</script>
</body>
</html>
 

.mouseenter( handler(eventObject) )

Description: Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
    });

</script>
</body>
</html>
 

.mouseleave( handler(eventObject) )

Description: Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

</script>
</body>
</html>
 

.mousemove( handler(eventObject) )

Description: Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:220px; height:170px; margin;10px; margin-right:50px;
        background:yellow; border:2px groove; float:right; }
  p { margin:0; margin-left:10px; color:red; width:220px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>   
    Try scrolling too.
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
  </p>

  <div></div>
<script>
    $("div").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

</script>
</body>
</html>
 

.mouseout( handler(eventObject) )

Description: Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    }).mouseover(function(){
      $("p:first",this).text("mouse over");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

</script>
</body>
</html>
 

.mouseover( handler(eventObject) )

Description: Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
    });

</script>
</body>
</html>
 
 

.mouseup( handler(eventObject) )

Description: Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Press mouse and release here.</p>

<script>
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

</script>
</body>
</html>
 

.one( eventType, [ eventData ], handler(eventObject) )

Description: Attach a handler to an event for the elements. The handler is executed at most once per element.

<!DOCTYPE html>
<html>
<head>
  <style>
div { width:60px; height:60px; margin:5px; float:left;
background:green; border:10px outset; 
cursor:pointer; }
p { color:red; margin:0; clear:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<p>Click a green square...</p>
<script>
var n = 0;
$("div").one("click", function(){
var index = $("div").index(this);
$(this).css({ borderStyle:"inset",
    cursor:"auto" });
$("p").text("Div at index #" + index + " clicked." +
  "  That's " + ++n + " total clicks.");
});

</script>
</body>
</html>
 

jQuery.proxy( function, context )

Description: Takes a function and returns a new one that will always have a particular context.

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// This also works:
// $("#test").click( jQuery.proxy( obj.test, obj ) );
 

.ready( handler )

Description: Specify a function to execute when the DOM is fully loaded.

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});
  </script>

</head>
<body>
 <p>Not loaded yet.</p>
</body>
</html>
 

.resize( handler(eventObject) )

Description: Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

.scroll( handler(eventObject) )

Description: Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });

</script>
</body>
</html>
 

.select( handler(eventObject) )

Description: Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; }
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>

    Click and drag the mouse to select text in the inputs.
  </p>
  <input type="text" value="Some text" />
  <input type="text" value="to test on" />

  <div></div>
<script>
    $(":input").select( function () { 
      $("div").text("Something was selected").show().fadeOut(1000); 
    });
</script>
</body>
</html>

 

.submit( handler(eventObject) )

Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Type 'correct' to validate.</p>
  <form action="javascript:alert('success!');">
    <div>
      <input type="text" />

      <input type="submit" />
    </div>
  </form>
  <span></span>
<script>

    $("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });
</script>
</body>
</html>
 

.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] )

 Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
  </ul>
<script>
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

</script>
</body>
</html>
 

.trigger( eventType, extraParameters )

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

<!DOCTYPE html>
<html>
<head>
  <style>

button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>

<div><span>0</span> button #2 clicks.</div>
<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');

update($("span:last"));
});

function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>
</body>
</html>
 

.triggerHandler( eventType, extraParameters )

Description: Execute all handlers attached to an element for an event.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>
<script>

$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

</script>
</body>
</html>

 

.unbind( eventType, handler(eventObject) )

Description: Remove a previously-attached event handler from the elements.

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>

<div style="display:none;">Click!</div>
<script>

function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
  .text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
  .text("Does nothing...");
});

</script>
</body>
</html>
 

.undelegate( )

Description: Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements.

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body").delegate("#theone", "click", aClick)
    .find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
  $("body").undelegate("#theone", "click", aClick)
    .find("#theone").text("Does nothing...");
});
</script>
</body>
</html>
 

.unload( handler(eventObject) )

Description: Bind an event handler to the "unload" JavaScript event.

$(window).unload(function() {
  alert('Handler for .unload() called.');
});




Posted by at
Labels:
 

Followers