Web
Analytics
Jquery Bind Method with example - Tutorial

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”>
<head>
<title></title>
<script src=”Scripts/jquery-2.2.3.js”></script>
<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”:”” });
}
});

</script>
</head>
<body>
<img src=”Images/man1.jpg” />
<img src=”Images/man2.jpg” />
<img src=”Images/man3.jpg” />
<img src=”Images/women.jpg” />
</body>
</html>

Download Source Code

Select your currency