jquery绑定事件和入口函数

程序员文章站 2023-12-30 19:42:10

...

绑定事件和入口函数

V哥教育QQ群：673215016

1，绑定单机事件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery绑定事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <button type="button" id="btn1">点击我</button>
    </body>
    <script type="text/javascript">
        var btn1 = $("#btn1");
        //调用client方法绑定一个事件
        btn1.click(function () {
            alert("click button #btn1");
        });
    </script>
</html>

我们上面仅仅是绑定了一个单机按钮的事件，对于其他的事件，我们也是用同样的思路来解决，这个之后会慢慢的讲到

2，入口函数：
比如说我们上面的代码，如果我们把具体的业务逻辑放到header里面，是不是就有问题了？因为我们的js的执行是从上往下执行的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery绑定事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            var btn1 = $("#btn1");
            //调用client方法绑定一个事件
            btn1.click(function () {
                alert("click button #btn1");
            });
        </script>
    </head>
    <body>
        <button type="button" id="btn1">点击我</button>
    </body>
</html>

这个时候，我们点击按钮，不会出现任何的效果。这个是因为，我们再绑定事件的时候，要获取到id为btn1的这个元素，而这个元素是在body里面定义的，是在下面定义的。这个时候我们应该怎么办。我们写过原生的js我们知道可以使用 window.onload = function(){…}来解决：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery绑定事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var btn1 = $("#btn1");
                //调用client方法绑定一个事件
                btn1.click(function () {
                    alert("click button #btn1");
                });
            };
        </script>
    </head>
    <body>
        <button type="button" id="btn1">点击我</button>
    </body>
</html>

但是在jquery中海油一种更加简单的方式，如下：

Jquery绑定事件点击我

用以上的方式，我们传入的具体的执行业务的函数会在dom加载完成之后再来运行，这个时候，我们就可以正常的获取到btn1了。

但是window.onload和 ( f u n c t i o n ( ) ) 写法是由区别的： w i n d o w . o n l o a d 只能定义一次，但是我们的 (function())写法是由区别的：window.onload只能定义一次，但是我们的 (function())写法是由区别的：window.onload只能定义一次，但是我们的(function())可以定义多次。如果我们的window.onload定义多次，那么下面定义的会把上面定义的覆盖掉。比如我们看如下效果：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery绑定事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                alert("123");
            };
            window.onload = function () {
                alert("456");
            }
        </script>
    </head>
    <body>
        <button type="button" id="btn1">点击我</button>
    </body>
</html>

这个时候页面上只弹出了456，而上面的123没有弹出，这个就说明下面定义的会把上面定义的覆盖掉。

但是如果我们使用Jquery的方式，我们可以看到每次定义的都生效了：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery绑定事件</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                alert("123");
            });
            $(function () {
                alert("456");
            });
        </script>
    </head>
    <body>
        <button type="button" id="btn1">点击我</button>
    </body>
</html>

相关标签：我的公开课 jquery javascript html5

jquery绑定事件和入口函数

绑定事件和入口函数