Summary
Keywords
Full Transcript
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/binding-event-handlers-using-jquery-on.html 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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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.
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
