• 中文
    • English
  • 注册
  • 查看作者
  • 8:JS事件

    一.  点击事件

    添加点击事件有两种方式:

    • 根据id找到指定标签,为该标签添加事件

    • 直接在该标签上添加点击事件

    第一种方法的示例:

    <body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        btn1.onclick = function () {
            alert("点击了按钮1");
    
        }
        btn2.onclick = function () {
            alert("点击了按钮2");
    
        }
    
    </script>
    </body>

    再来看一下第二种方法示例:

    <script type="text/javascript">
        var fun1 = function () {
            alert("点击了按钮1");
    
        }
        var fun2 = function () {
            alert("点击了按钮2");
    
        }
    
    </script>

    二 .  输入框事件

    和点击事件一样,添加输入框事件也有两种方式:

    • 根据id找到指定标签,为该标签添加输入框事件

    • 直接在该标签上添加输入框事件

    第一种方法的示例:

    <input id = "input" type="text" />
    <script type="text/javascript">
        var input = document.getElementById("input");
        input.onfocus = function () {
            console.log("得到了焦点");
        }
        input.onblur = function () {
            console.log("失去了焦点");
        }
    </script>

    再来看一下第二种方法示例:

    <input id = "input" type="text" onfocus="fun1()" onblur="fun2()"/>
    <script type="text/javascript">
        var input = document.getElementById("input");
        var fun1 = function () {
            console.log("得到了焦点");
        }
        var fun2 = function () {
            console.log("失去了焦点");
        }
    </script>

    三.  文档加载事件

    如果我们把script标签放在两个按钮中间,会发现按钮1的功能正常,但是按钮2的功能出了问题,这是因为我们在script标签中通过getElementById(“btn2”);获取按钮2时,按钮2还不存在。

    <body>
    <button id="btn1">按钮1</button>
    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        btn1.onclick = function () {
            alert("点击了按钮1");
        }
        btn2.onclick = function () {
            alert("点击了按钮2");
        }
    </script>
    <button id="btn2">按钮2</button>
    </body>

    为了解决上面的问题,我们有两种解决方案,首先可以和以前一样,把scrip标签放在两个按钮下面,但是该方法有一定的局限性,一般不采用这种方法,一般我们会在整个文档加载完成的时候,再去获取元素。可以使用window.onload来实现:

    <body>
    <button id="btn1">按钮1</button>
    <script type="text/javascript">
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            btn1.onclick = function () {
                alert("点击了按钮1");
            }
            btn2.onclick = function () {
                alert("点击了按钮2");
            }
        };
    </script>
    <button id="btn2">按钮2</button>
    </body>

    山东省
  • 0
  • 0
  • 0
  • 1.4k
  • 请登录之后再进行评论

    登录

    赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    单栏布局 侧栏位置: