先看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=;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=;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事件失效的更多相关文章

  1. onBlur事件与onfocus事件（js）

      onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML><HEAD><TITL ...

  2. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  3. Js中的onblur和onfocus事件

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...

  4. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  5. JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  6. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  7. jQuery事件委托之Safari失效的解决办法--摘抄

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  8. iview upload on-format-error 事件 在 before-upload 事件 之后，导致在before里面阻止上传后，监测事件失效，需要自己手工写

    iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写

  9. onblur 对象失去焦点事件

    onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...

随机推荐

  1. 一看就会一做就废系列：说说 RECOVER DATABASE（上）

    这里是:一看就会,一做就废系列 数据库演示版本为 19.3 (12.2.0.3) 该系列涉及恢复过程中使用的 个语句: 1. recover database 2. recover database ...

  2. 关于Win32串口

    因为近段时间接触Hid相对来说多一些,由此忽略了串口中获取cbInQue这个重要的东西,下面是错误代码 // Win32SerialPortLib.cpp : 定义 DLL 应用程序的导出函数. // ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. C++的多态总结(静态&动态)

    什么是多态 顾名思义就是同一个事物在不同场景下的多种形态. 静态多态 我们以前说过的函数重载就是一个简单的静态多态,静态多态是编译器在编译期间完成的,编译器会根据实参类型来选择调用合适的函数,如果有合 ...

  5. AcWing 905. 区间选点

    //1.将每个区间按右端点从小到大排序 //2.从前往后依次枚举每个区间,如果当前区间中已经包含点,就直接跳过,否则,选择当前区间的右端点 //选右端点的话,可以尽可能的包含在多个区间里 #inclu ...

  6. centos7 sshpass 用法详解

    可以参考文章:https://www.cnblogs.com/kaishirenshi/p/7921308.html 安装方式直接通过yum 安装 yum -y install sshpass 常用的 ...

  7. Go网络编程TCP

    1. 服务端 package main import ( "bufio" "fmt" "net" "os" " ...

  8. Iris配置

    package main import ( "github.com/kataras/iris" "os" "encoding/json" & ...

  9. 转载：EQ--biquad filter

    http://www.musicdsp.org/files/Audio-EQ-Cookbook.txt https://arachnoid.com/BiQuadDesigner/index.html ...

  10. Python核心编程：8个实践性建议

    前言 我们在用Python进行机器学习建模项目的时候,每个人都会有自己的一套项目文件管理的习惯,我自己也有一套方法,是自己曾经踩过的坑踩过的雷总结出来的,现在在这里分享一下给大家,因为很多伙伴是接触P ...