回调函数和注册事件的两种方式

最新推荐文章于 2023-07-26 17:15:41 发布

花花的果子

最新推荐文章于 2023-07-26 17:15:41 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/huahuadeguozi/article/details/100174875

版权

回调函数

对于下面的程序来说，sayHello函数被称为回调函数（cellback函数）
回调函数的特点：
自己把这个函数写出来了，但是这个函数不是自己负责调用，由其他程序负责调用

    <body>
        <script type="text/javascript">
            function sayHello() {
                alert("hello   huahua")
            }
        </script>
        <input type="button" value="hello" onclick="sayHello()">
    </body>

java中也有回调机制

注册事件的第一种方式

以下代码的含义是将sayHello函数注册到按钮上，等待click事件发生后，该函数被浏览器调用

        <input type="button" value="hello" onclick="sayHello()">

注册事件的第二种方式

使用纯js代码完成事件的注册,下面的是不完善的，便于理解

        <input type="button" value="hello01" id="mybtn01"/>
        <script type="text/javascript">

            //第一步，先获取按钮的对象
            var btnObj = document.getElementById("mybtn01");
            //第二步，给按钮的onclick属性赋值
            btnObj.onclick = doSome;//注意不能有小括号
            function doSome() {
                alert("do some......")
            }
        </script>

以下为其变形

    <body onload="ready()">
        <script type="text/javascript">
            function ready() {
                document.getElementById("mybtn01").onclick= function () {
                    alert("Hello")
                }
            }
        </script>
        <input type="button" value="hello01" id="mybtn01">
    </body>

下面是其最终的变形，这也是最常用的方式：使用一个匿名函数来减少代码量

在页面加载的过程中，将函数注册给了load事件，在页面加载完成后，load事件发生，此时回调函数执行

    <body>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("mybtn").onclick = function () {
                    alert("hello")
                }
            }
        </script>
        <input type="button" value="hello" id="mybtn"/>
    </body>