Tutorial JQuery : More about Events
Tutorial JQuery : More about Events
What You Will Learn:
• More Events (Bind/Unbind)
• Depreciated Events
Requirements:
• Knowledge of HTML, CSS and JS.
• Basics syntax of JQuery.
• Basics of Events.
Difficulty:
• Basic.
Tutorial Contents:
After understanding mouse, keyboard and form events this tutorial covers bind, unbind and on/off event and which one is batter. Why two events perform same functionality? This question is answered in this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('input').bind('select',function(){
$("input").css("background","yellow");
});
});
</script>
</head>
<body>
<input type="text" value="tutorial">
</body>
</html>
Run this code and after selecting something in the input field, the color of the text field will be yellow. As you can see in the picture below:
Bind event, as the name shows, is for combining the event and actions. You can see the example from the code above. Another alternate of bind is “on”. There is no difference between them. .on is batter because .bind will also convert itself into .on in backend so your site’s performance could be a little batter if you use .on.
Another JQuery event is .one. It is for performing the functionality only once. To better understand this see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('input').bind('select',function(){
$(".para").fadeToggle(1000);
});
});
</script>
</head>
<body>
<p class="para">Hello World</p>
<input type="text" value="tutorial">
</body>
</html>
There is an input field and a paragraph in the HTML body. The code in the script means that whenever I will select any character in the input field the function will be triggered. Now Instead of the above given code if the function and events are combined using .one this means that the function will be triggered only once. You should try it yourself.
Unbind is opposite of bind. Like bind combines the event and function, unbind is to remove event and function. To understand this lets see an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('p').click(function(){
$(this).fadeToggle(1000);
});
});
</script>
</head>
<body>
<p>Hello World</p>
<p>I am Web Dev</p>
</body>
</html>
Above written code consists of two paragraphs and a simple JQuery click event. Now to unbind the event and the function I have added some more code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('p').click(function(){
$(this).fadeToggle(1000);
});
$("button").click(function(){
$("p").unbind();
});
});
</script>
< /head>
< body>
< p>Hello World</p>
< p>I am Web Dev</p>
< button>Remove Event</button>
< /body>
< /html>
Run this code in the browser everything will see something like this
Everything will works as expected but because of unbind event, when you click on the function if you click on the paragraph nothing will happen. Another alternative of .unbind is .off. In near future bind/unbind will be depreciated from JQuery and on/off will replace them permanently.
Curriculum
Posted on Utopian.io - Rewarding Open Source Contributors
Thanks for sharing brothermic. This is definatly interesting for a someone like me who just started learning the art of jquerry. Thanks to you
I love hearing that I helping you out :) thats why I do it for! :)
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
thanks alot!
Very interesting and important tutorial you share with us.I want to learn javascript, programming etc..you must be good trainer this subject...
thanks alot!
Goede tutorial
Groetjes @brothermic
@brothermic, I like your contribution to open source project, so I upvote to support you.
thanks alot!
very good and awesome tutorial
Hey @brothermic I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
thanks!