JavaScript Events

Javascript Events and Functions

Here are some of the list of javascript events and function that are used in javascript.

 .bind()

Attach a handler to an event for the elements.

$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});

 .blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

 .change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

 <select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();

 .click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

 .dblclick()

Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

 .delegate()

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.

 .die()

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

 .error()

Bind an event handler to the “error” JavaScript event.

 event.currentTarget

The current DOM element within the event bubbling phase.

 event.data

An optional object of data passed to an event method when the current executing handler is bound.

<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>
<div id="log"></div>

<script>
var logDiv = $("#log");
/* Note: This code is for demonstration purposes only. */
for (var i = 0; i < 5; i++) {
$("button").eq(i).on("click", {value: i}, function(event) {
var msgs = [
"button = " + $(this).index(),
"event.data.value = " + event.data.value,
"i = " + i
];
logDiv.append( msgs.join(", ") + "<br>" );
});
}
</script>

 event.delegateTarget

The element where the currently-called jQuery event handler was attached.

 event.isDefaultPrevented()

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()

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

<script>
function immediatePropStopped(e) {
var msg = "";
if ( e.isImmediatePropagationStopped() ) {
msg = "called"
} else {
msg = "not called";
}
$("#stop-log").append( "<div>" + msg + "</div>" );
}
$("button").click(function(event) {
immediatePropStopped(event);
event.stopImmediatePropagation();
immediatePropStopped(event);
});
</script>

 event.isPropagationStopped()

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

 event.metaKey

Indicates whether the META key was pressed when the event fired.

<script>
$('#checkMetaKey').click(function(e){
$('#display').text(e.metaKey);
});
</script>

 event.namespace

The namespace specified when the event was triggered.
<script>
$("p").on("test.something", function(event) {
alert( event.namespace );
});
$("button").click(function(event) {
$("p").trigger("test.something");
});
</script>

 event.pageX

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

<script>$(document).on('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script>

 event.pageY

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

 event.preventDefault()

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

 event.relatedTarget

The other DOM element involved in the event, if any.
$("a").mouseout(function(event) {
alert(event.relatedTarget.nodeName); // "DIV"
});

 event.result

The last value returned by an event handler that was triggered by this event, unless the value was undefined.

<script>
$("button").click(function(event) {
return "hey";
});
$("button").click(function(event) {
$("p").html( event.result );
});
</script>

 event.stopImmediatePropagation()

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

 event.stopPropagation()

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

 event.target

The DOM element that initiated the event.

<script>$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
}); </script>

 event.timeStamp

The difference in milliseconds between the time the browser created the event and January 1, 1970.

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

 event.type

Describes the nature of the event.

 event.which

For key or mouse events, this property indicates the specific key or button that was pressed.

 .focus()

Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>

 .focusin()

Bind an event handler to the “focusin” event.

 .focusout()

Bind an event handler to the “focusout” JavaScript event.

<script>
var fo = 0, b = 0;
$("p").focusout(function() {
fo++;
$("#fo")
.text("focusout fired: " + fo + "x");
}).blur(function() {
b++;
$("#b")
.text("blur fired: " + b + "x");
});
</script>

 .hover()

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

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

 jQuery.proxy()

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

<script>
var me = {
type: "zombie",
test: function(event) {
/* Without proxy, `this` would refer to the event target */
/* use event.target to reference that element. */
var element = event.target;
$(element).css("background-color", "red");
/* With proxy, `this` refers to the me object encapsulating */
/* this function. */
$("#log").append( "Hello " + this.type + "<br>" );
$("#test").off("click", this.test);
}
};
var you = {
type: "person",
test: function(event) {
$("#log").append( this.type + " " );
}
};
/* execute you.test() in the context of the `you` object */
/* no matter where it is called */
/* i.e. the `this` keyword will refer to `you` */
var youClick = $.proxy( you.test, you );
/* attach click handlers to #test */
$("#test")
/* this === "zombie"; handler unbound after first click */
.on( "click", $.proxy( me.test, me ) )
/* this === "person" */
.on( "click", youClick )
/* this === "zombie" */
.on( "click", $.proxy( you.test, me ) )
/* this === "<button> element" */
.on( "click", you.test );
</script>

 .keydown()

Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

<script>
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});</script>

.keypress()

Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

<script>
var xTriggered = 0;
$("#target").keypress(function(event) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
});
$("#other").click(function() {
$("#target").keypress();
});</script>

.keyup()

Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

.live()

Attach an event handler for all elements which match the current selector, now and in the future.

 .load()

Bind an event handler to the “load” JavaScript event.

.mousedown()

Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.
<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>

.mouseenter()

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

.mouseleave()

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

.mousemove()

Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

.mouseout()

Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

 .mouseover()

Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

.mouseup()

Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

.off()

Remove an event handler.

<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
</script>

.on()

Attach an event handler function for one or more events to the selected elements.

<script>
$("p").on("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
</script>

.one()

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

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

.ready()

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

 .resize()

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()

Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.
<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>

.select()

Bind an event handler to the “select” JavaScript event, or trigger that event on an element.
<script>
$(":input").select( function () {
$("div").text("Something was selected").show().fadeOut(1000);
});
</script>

.submit()

Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.
<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>

.toggle()

Bind two or more handlers to the matched elements, to be executed on alternate clicks.
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.
<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>

.triggerHandler()

Execute all handlers attached to an element for an event.
<script>
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
</script>

 .unbind()

Remove a previously-attached event handler from the elements.
<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>

.undelegate()

Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
<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...");
});

.unload()

Bind an event handler to the “unload” JavaScript event.
$(window).unload( function () { alert("Bye now!"); } );