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>