{"id":16987,"date":"2020-08-07T13:50:08","date_gmt":"2020-08-07T13:50:08","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16987"},"modified":"2022-04-28T09:15:18","modified_gmt":"2022-04-28T09:15:18","slug":"jquery-mouse-events-an-jquery-for-beginners","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/jquery-mouse-events-an-jquery-for-beginners\/","title":{"rendered":"jQuery Mouse Events: An jQuery for Beginners"},"content":{"rendered":"\n<p>In this blog you are going to learn <strong>Mouse Events<\/strong><\/p>\n\n\n\n<p>There are five types of <strong>Mouse Events<\/strong> that are given in our image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/mouse.png\" alt=\"\" class=\"wp-image-16991\"\/><\/figure>\n\n\n\n<p>Let&#8217;s understand each other one by one.<\/p>\n\n\n\n<p><strong>Click =&gt;<\/strong> On hearing the name of the click, you must have understood that as soon as the mouse goes and clicks, the code function that we have given will work, we understand with an example.<\/p>\n\n\n\n<p><strong>Example:<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/click-code.png\" alt=\"\" class=\"wp-image-17000\"\/><\/figure>\n\n\n\n<p><strong>Some such results can be seen in our browser.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/1-1024x240.png\" alt=\"\" class=\"wp-image-17001\"\/><\/figure>\n\n\n\n<p><strong>This type of browser opens after clicking<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/click2-1024x233.png\" alt=\"\" class=\"wp-image-17002\"\/><\/figure>\n\n\n\n<p><strong>dblClick =&gt;<\/strong> This means that as soon as we double click on our page, what we have written in the function will work as we have explained in the example.<\/p>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/dbl.png\" alt=\"\" class=\"wp-image-17003\"\/><\/figure>\n\n\n\n<p><strong>Our result after double clicking<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/dbl2-1024x225.png\" alt=\"\" class=\"wp-image-17004\"\/><\/figure>\n\n\n\n<p><strong>contextmenu<\/strong> =&gt; This means that as soon as we right click, then what we have given in the code will work as we have shown in the example.<\/p>\n\n\n\n<p><strong>Example<\/strong>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/right1.png\" alt=\"\" class=\"wp-image-17006\"\/><\/figure>\n\n\n\n<p><strong>My result after right clicking<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/right-1024x222.png\" alt=\"\" class=\"wp-image-17007\"\/><\/figure>\n\n\n\n<p><strong>mouseenter =&gt;<\/strong> This means that if we move the mouse to the target which we have targeted, then the function will work as we have explained in the example.<\/p>\n\n\n\n<p><strong>Example<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/target-1.png\" alt=\"\" class=\"wp-image-17008\"\/><\/figure>\n\n\n\n<p><strong>My result when moving the mouse near the target<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/textexmple-1024x218.png\" alt=\"\" class=\"wp-image-17009\"\/><\/figure>\n\n\n\n<p><strong>mouseleave <\/strong>=&gt; This means that as soon as we move away from the code on which the mouse is written, my function will work. As we explained in the example<\/p>\n\n\n\n<p><strong>Example<\/strong>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/leave.png\" alt=\"\" class=\"wp-image-17010\"\/><\/figure>\n\n\n\n<p><strong>My result as soon as the mouse was removed from there<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/result56-1024x224.png\" alt=\"\" class=\"wp-image-17011\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog you are going to learn Mouse Events There are five types of Mouse Events that are given in our image below. Let&#8217;s understand each other one by&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[6318,6320,6319,6321,6322],"class_list":["post-16987","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-click","tag-contextmenu","tag-dblclick","tag-mouseenter","tag-mouseleave"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16987"}],"version-history":[{"count":0,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16987\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}