Suggested Videos
Part 30 - jQuery mouse events
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked
In this video we will discuss binding event handlers to events using bind() method in jQuery
One way to bind event handlers to events is by using the jQuery shorthand functions like .click, .mouseover etc. Bind method is another way of doing the same.
The following example binds click event handler to the button - btnClickMe
Binds multiple event handlers to the button - btnClickMe. If required, the event object can also be passed to the event handler method, although it is optional.
Use the unbind() method to unbind the event handler
To unbind all the event handlers of an element, use unbind() method without any parameters
Please note: If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. We will discuss on() and off() methods in our next video.
Complete Example :
Part 30 - jQuery mouse events
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked
In this video we will discuss binding event handlers to events using bind() method in jQuery
One way to bind event handlers to events is by using the jQuery shorthand functions like .click, .mouseover etc. Bind method is another way of doing the same.
The following example binds click event handler to the button - btnClickMe
$('#btnClickMe').bind('click', function () {
$('#divResult').html('Button Clicked');
});
Binds multiple event handlers to the button - btnClickMe. If required, the event object can also be passed to the event handler method, although it is optional.
$('#btnClickMe').bind('click mouseover mouseout',
function
(event) {
if (event.type == 'click') {
$('#divResult').html('Button Clicked at
' + 'X = '
+ event.pageX + ' Y = ' + event.pageY);
}
else if (event.type == 'mouseover') {
$(this).addClass('ButtonStyle');
}
else {
$(this).removeClass('ButtonStyle');
}
});
Use the unbind() method to unbind the event handler
$('#btnClickMe').unbind('mouseover');
To unbind all the event handlers of an element, use unbind() method without any parameters
$('#btnClickMe').unbind();
Please note: If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. We will discuss on() and off() methods in our next video.
Complete Example :
<html>
<head>
<title></title>
<style>
.ButtonStyle {
background-color: red;
cursor: pointer;
font-weight: bold;
color: white;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnClickMe').bind('click mouseover
mouseout', function (event) {
if (event.type == 'click') {
$('#divResult').html('Button Clicked at '
+ 'X = ' + event.pageX + ' Y = ' + event.pageY);
}
else if (event.type == 'mouseover') {
$(this).addClass('ButtonStyle');
}
else {
$(this).removeClass('ButtonStyle');
}
});
$('#btnEnableMouseOverEffect').click(function () {
$('#btnClickMe').bind('mouseover', function () {
$(this).addClass('ButtonStyle');
});
});
$('#btnDisableMouseOverEffect').click(function () {
$('#btnClickMe').unbind('mouseover');
});
});
</script>
</head>
<body style="font-family:Arial">
<input id="btnClickMe" type="button" value="Click Me" />
<input id="btnEnableMouseOverEffect" type="button"
value="Enable Mouse Over Effect" />
<input id="btnDisableMouseOverEffect" type="button"
value="Disable Mouse Over Effect" />
<br /><br />
<div id="divResult"></div>
</body>
</html>
No comments:
Post a Comment
It would be great if you can help share these free resources