Suggested Videos
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked
Part 33 - Binding event handlers in jquery
In this video we will discuss binding event handlers to events using on() method in jQuery
In Part 33 of jQuery Tutorial, we discussed how to bind event handlers using bind() method. If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods.
The syntax for using on() and off() methods is very similar to using bind() and unbind() methods. The following example is the same example we worked with in Part 33. Instead of using bind() and unbind() we are using on() and off() methods.
In the example above we are binding a single anonymous function as the event handler for all the 3 events
1. click
2. mouseover
3. mouseout
If you want to bind a different anonymous function, you could do so using the following syntax.
jQuery shorthand functions (.click, .mouseover, .mouseout etc.) call on() method behind the scenes.
So far in this video series we have seen 3 different ways of binding event handlers in jQuery
1. Using jQuery shorthand functions (.click, .mouseover, .mouseout etc.)
element.click(function () { ... });
2. With jQuery version < 1.7, bind() method can be used
element.bind('click', function () { ... });
3. With jQuery version 1.7 or higher, on() method can be used.
element.on('click', function () { ... });
According to jQuery.com, as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers.
Part 31 - jQuery event object
Part 32 - jQuery to detect which mouse button clicked
Part 33 - Binding event handlers in jquery
In this video we will discuss binding event handlers to events using on() method in jQuery
In Part 33 of jQuery Tutorial, we discussed how to bind event handlers using bind() method. If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods.
The syntax for using on() and off() methods is very similar to using bind() and unbind() methods. The following example is the same example we worked with in Part 33. Instead of using bind() and unbind() we are using on() and off() methods.
<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').on('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').on('mouseover', function () {
$(this).addClass('ButtonStyle');
});
});
$('#btnDisableMouseOverEffect').click(function () {
$('#btnClickMe').off('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>
In the example above we are binding a single anonymous function as the event handler for all the 3 events
1. click
2. mouseover
3. mouseout
If you want to bind a different anonymous function, you could do so using the following syntax.
$('#btnClickMe').bind({
click: function (event) {
$('#divResult').html('Button clicked at
X = '
+ event.pageX + ' Y = ' + event.pageY);
},
mouseover: function () {
$(this).addClass('ButtonStyle');
},
mouseout: function () {
$(this).removeClass('ButtonStyle');
}
});
jQuery shorthand functions (.click, .mouseover, .mouseout etc.) call on() method behind the scenes.
So far in this video series we have seen 3 different ways of binding event handlers in jQuery
1. Using jQuery shorthand functions (.click, .mouseover, .mouseout etc.)
element.click(function () { ... });
2. With jQuery version < 1.7, bind() method can be used
element.bind('click', function () { ... });
3. With jQuery version 1.7 or higher, on() method can be used.
element.on('click', function () { ... });
According to jQuery.com, as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers.
No comments:
Post a Comment
It would be great if you can help share these free resources