Jquery Bind Method with example | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Jquery have various inbuilt method which can be triggered as per user action. Bind method is also in one of them. using bind method we can register a function on a DOM element.

Basic syntax of Bind method is 

bind(eventType, function)

eventType: Java Script Event Name

function: Custom function

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<script src=”Scripts/jquery-2.2.3.js”></script>
$(document).ready(function () {

//Register function on mouseenter ,click and mouseout javascipt events
$(“img”).bind(“mouseenter click”, fnof_mouseenter).bind(“mouseout”, fnof_mouseout);

function fnof_mouseenter(e) {

//e is a object which have some specified properties
if (e.type == “mouseenter”) {

//this is representing image
$(this).css({ “opacity”: “0.5”, “border”: “2px solid red” });
if (e.type == “click”) {
$(this).css({ “width”: “500px”, “height”: “500px” });

function fnof_mouseout(e) {
$(this).css({ “opacity”: “”, “border”: “”, “width”:””,”height”:”” });

<img src=”Images/man1.jpg” />
<img src=”Images/man2.jpg” />
<img src=”Images/man3.jpg” />
<img src=”Images/women.jpg” />

Download Source Code