onblur事件和onfocus事件失效

Posted 2020-11-22 xiaohaodeboke

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文件

以上是关于onblur事件和onfocus事件失效的主要内容，如果未能解决你的问题，请参考以下文章

js常用对象：点击双击onload事件鼠标相关onblur事件和onfocus事件等；通过循环给多个元素添加事件通过addEventListener() 方法监听事件函数

[TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

onblur,onfocus事件

onfocus事件,onblur事件；Focus()方法,Blur()方法

事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）转载

onBlur事件是啥？