Search

Saturday, May 14, 2016
0 comments

JQuery Bind function handles Click, DblClick, MouseEnter and MouseLeave Event

9:30 AMSaturday, May 14, 2016
In this article i will show you how to use Bind( ) function in JQuery. Bind function is used to call events using string or triggers. I mean to say that  either you can pass event directly in the method or externally using triggers. In this example, i will show you click , double click , Mouse Enter and Mouse Leave event directly in Bind Function. In this example i will show you , when cursor moves on paragraph boundary then class toggle with different color. Lets check this example.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        p{
            background-color:red;
            padding:5px;
            font-size:larger;
        }
        .over{
            color:white;
            background-color:blue;
        }
        span{
            color:green;
        }
    </style>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $("p").bind("click", function (event) {
                var string = "Get Cordinate" + event.pageX + "and" + event.pageY;
                $("span").text("single Clicked " + string);

            });

            $("p").bind("dblclick", function (event) {
           
                $("span").text("Double Clicked " + this.nodeName);

            });

            $("p").bind("mouseenter mouseleave", function (event) {

                $(this).toggleClass("over");
            });



        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
<p>Click, Double Click, MouseEnter and MouseLeave Event Example</p>
        <span></span>
    </form>
</body>
</html>

Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top