Binding event handlers using jquery on method
Автор: kudvenkat
Загружено: 2015-04-28
Просмотров: 48271
Описание:
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
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.
Replace < with LESSTHAN symbol and > with GREATERTHAN symbol
<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.
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке:
![Группа КИНО - ЛУЧШИЕ ПЕСНИ 2024 [СБОРНИК] @ХитЗаХитом](https://imager.clipsaver.ru/b40ZmyQ-8OE/max.jpg)