Hybrid App开发之jQuery绑定事件

前言：

前面学习了JQuery操作DOM元素，今天学习一下JQuery的事件机制。

页面载入事件

页面载入事件的写法有如下四种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //写法一
        $(document).ready(function () {

        });
        //写法二
        $(function () {

        });
        //写法三
        jQuery(document).ready(function () {

        });
        //写法四
        jQuery(function () {

        });
    </script>
</head>
<body>

</body>
</html>

这里比较推荐第二种写法，比较简洁明了。

绑定事件

通过bind绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //写法二
        $(function () {
            //为id为testBtn的button绑定一个事件
            $("#testBtn").click(function () {

            });
            //等同于下面这种方式
            $("#testBtn").bind("click", function () {

            });
            //也可以通过bind绑定其他事件
            $("#testBtn").bind("mouseover", function () {

            });
            //也可以通过下面的方式同时绑定多个事件
            $("#testBtn").bind({
                "mouseover": function () {

                }, "mouseleave": function () {
                    
                }
            })
        });
    </script>
</head>
<body>
<div>
    <input type="button" id="testBtn" value="确认">
</div>
</body>
</html>

切换事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        //写法二
        $(function () {
            //为id为testBtn的button绑定一个事件
            $("#testBtn").click(function () {

            });
            //等同于下面这种方式
            $("#testBtn").bind("click", function () {

            });
            //也可以通过bind绑定其他事件
            $("#testBtn").bind("mouseover", function () {

            });
            //也可以通过下面的方式同时绑定多个事件
            $("#testBtn").bind({
                "mouseover": function () {

                }, "mouseleave": function () {

                }
            });
            //这种等价于使用hover 在两个事件之间切换
            $("#testBtn").hover({
                "mouseover": function () {

                }, "mouseleave": function () {

                }
            });
            //使用toggle方法可以依次执行方法
//            $("#testBtn").toggle(function () {
//            },function () {
//            });
            // 移除全部事件
            $("#testBtn").unbind();
            function btnClick() {

            }

            //移除指定事件
            $("#testBtn").unbind("click", btnClick);
        });
    </script>
</head>
<body>
<div>
    <input type="button" id="testBtn" value="确认">
</div>
</body>
</html>

总结：

大致了解一下JQuery的事件绑定。

posted on 2017-06-20 22:14 总李写代码阅读(288) 评论(0) 编辑收藏举报