zoukankan      html  css  js  c++  java
  • onblur事件和onfocus事件失效

    先看onblur事件和onfocus事件的定义:

      <element onblur="SomeJavaScriptCode">

      <element onfocus="SomeJavaScriptCode">

      双引号中的内容是一段js代码,也可以是一个事件函数

    在看几个例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" onfocus="study(prompt('请输入显示欢迎学习js的次数'))" >
            <script>
                function study(count){
                    for(var i=0;i<count;i++){
                        document.write("<h4>欢迎学习js</h4>")
                    }
                }
            </script>
            
            
        </body>
    </html>

    运行以上代码,鼠标点击输入框(使输入框获得焦点,如下图)

    输入数字后,如下图,

     

      对代码进行修改,如下图:

    完整代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" onfocus="study(prompt('请输入显示欢迎学习js的次数'))" >
            <script>
                $(document).ready(function study(count){
                    for(var i=0;i<count;i++){
                        document.write("<h4>欢迎学习js</h4>")
                    }
                })
            </script>
            
            
        </body>
    </html>

    再点击输入框,使输入框获得焦点,发现没有反应,如下图

     

     原因在于  ready函数,ready函数创建了一个局部函数作用域,外面是不能调用内部的study函数的。所以  你的onblur事件失效是不是这个原因呢?

     解决方案:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <input id="btn" type="text" placeholder="请输入显示欢迎学习js的次数" >
            <script src="js/jquery-1.12.4.js"></script>
            <script>
                $(document).ready(function(){
                    //绑定事件
                    $("#btn").focus(study);
                
                    function study(){
                        document.write("<h4>欢迎学习js</h4>")
                    }
                })
            </script>
        </body>
    </html>

     利用jQuery绑定事件,当然使用原生js绑定也是一样的

    注:jQuery的ready方法就是等待DOM元素加载完便立即执行,原生js接口onload是等待所有html加载完再加载js文件

  • 相关阅读:
    spark的做算子统计的Java代码(在Linux系统集群式运行)
    http协议面试题
    vue响应式原理
    vue-cli3搭建vue项目
    vscode中自定义代码片段
    vue中常用的全局配置
    tomcat安装配置
    Git相关
    nginx配置文件详解
    nginx源码安装
  • 原文地址:https://www.cnblogs.com/xiaohaodeboke/p/11876846.html
Copyright © 2011-2022 走看看