jquery绑定 jquery绑定单机事件

转载

技术领航员 2023-08-06 07:06:27

文章标签 jquery绑定 jquery javascript js java 文章分类 jQuery 前端开发

Jquery事件绑定

V哥官网：http://www.vgxit.com

本博客对应视频教程：http://www.vgxit.com/course/19

1，Jquery标准绑定事件

对应的语法：

jq对象.事件方法(回调函数);

比如我们用单机事件举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var testDiv = $("#testDiv");
                testDiv.click(function () {
                    alert("点击了testDiv");
                });
            });
        </script>
    </head>
    <body>
        <div id="testDiv" style="width: 200px;height: 200px;background: pink;"></div>
    </body>
</html>

我们可以通过参考文档可以发现，我们jquery的事件气势上是很多的。比如，如果我们要绑定两个事件怎么办。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var testDiv = $("#testDiv");
                //鼠标移动到testDiv之上的时候调用的方法
                testDiv.mouseover(function () {
                    testDiv.css("background", "black");
                });
                //鼠标移动到testDiv外面去了之后调用的方法
                testDiv.mouseout(function () {
                    testDiv.css("background", "pink");
                });
            });
        </script>
    </head>
    <body>
        <div id="testDiv" style="width: 200px;height: 200px;background: pink;"></div>
    </body>
</html>

但是上面的写法不是太好，我们可以采用链式编程的方式来简化代码：

testDiv.mouseover(function () {//鼠标移动到testDiv之上的时候调用的方法
    testDiv.css("background", "yellow");
}).mouseout(function () {//鼠标移动到testDiv外面去了之后调用的方法
    testDiv.css("background", "pink");
});

2，Jquery常用绑定事件汇总：

1，hover:悬停事件。传入2个参数，这两个参数都是回调函数。当鼠标移动到对应的元素上的时候，触发第一个函数，当鼠标移除对应的元素的时候，触发第二个函数。这个能够达到的效果和我们上节课讲的mouseover和mouseout比较类似：

$(function () {
                var testDiv = $("#testDiv");
                testDiv.hover(function () {
                    testDiv.css("background", "blue");
                }, function () {
                    testDiv.css("background", "pink");
                });
            });

2，blur:当对应的元素失去焦点的时候触发。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var myInput = $("#myInput");
                myInput.blur(function () {
                    alert("我失去焦点了");
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="myInput"/>
    </body>
</html>

3，change:当元素的值发生改变的时候触发。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var myInput = $("#myInput");
                myInput.change(function () {
                    alert("值改变了");
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="myInput"/>
    </body>
</html>

4，dbclick:当鼠标在元素上双击的时候触发。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var testDiv = $("#testDiv");
                testDiv.dblclick(function () {
                    alert("我被双击了");
                });
            });
        </script>
    </head>
    <body>
        <div id="testDiv" style="width: 200px;height: 200px;background: pink;"></div>
    </body>
</html>

5，focus:当文本框获取到焦点的时候触发：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var myInput = $("#myInput");
                myInput.focus(function () {
                    console.log("我获取到了焦点了");
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="myInput"/>
    </body>
</html>

6，keydown:按下键盘的时候触发。它发生在当前获得焦点的元素上：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var myInput = $("#myInput");
                myInput.keydown(function (event) {
                    console.log("我按下了键盘" + event.keyCode);
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="myInput"/>
    </body>
</html>

7，keypress:keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var myInput = $("#myInput");
                myInput.keypress(function (event) {
                    console.log("我按下了键盘" + event.keyCode);
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="myInput"/>
    </body>
</html>

8,mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#mydiv").mousedown(function () {
                    alert(123);
                });
            });
        </script>
    </head>
    <body>
        <div id="mydiv" style="background: pink; width: 200px; height: 200px;"></div>
    </body>
</html>

9,mousup事件：当在元素上放松鼠标按钮时，会发生 mouseup 事件。

10,submit事件：当提交表单的时候触发的事件。同样submit也可以用来通过js提交表单。

3，on/off绑定和解除事件

jq对象.on("事件名称", 回调函数)

jq对象.off("事件名称")

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单绑定单机事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#mydiv").on("click", function () {
                    alert(123);
                });
                $("#mydiv").off("click");
            });
        </script>
    </head>
    <body>
        <div id="mydiv" style="background: pink; width: 200px; height: 200px;"></div>
    </body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。