先看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. Android 验证APK签名对比

    最近OTT制定产品,其中有一条需求是只能安装自己公司签名的APK,所以在网上找了相关资料,最后总结功能实现如下: 1.签名错误码frameworks/base/core/java/android/co ...

  2. python3练习100题——010

    第10天了,今天的题目跟009类似,都比较水,有时间的话再做一道- 链接:http://www.runoob.com/python/python-exercise-example10.html 题目: ...

  3. NW.js桌面应用开发（一）

    NWjs中文网 Electron中文网 一些需要了解的历史与特性,其实就是 NW.js 和 Electron的争议,建议还是亲自阅读一下各自的官网说明 1.下载SDK版工具 从淘宝NPM镜像下载,速度 ...

  4. OpenCV函数 重映射

    重映射是什么意思? 把一个图像中一个位置的像素放置到另一个图片指定位置的过程. 为了完成映射过程, 有必要获得一些插值为非整数像素坐标,因为源图像与目标图像的像素坐标不是一一对应的. 我们通过重映射来 ...

  5. 用eclipse的同一个tomcat启动两个javaweb项目

    1.右键选择 Add and Remove 2.把左边两个项目add到右边 3.完成之后查看eclipse左边的Servers下的server.xml文件,会自动生成两个Context标签,当然你到第 ...

  6. 「hdu 4845 」拯救大兵瑞恩 [CTSC 1999]（状态压缩bfs & 分层图思想）

    首先关于分层图思想详见2004的这个论文 https://wenku.baidu.com/view/dc57f205cc175527072208ad.html 这道题可以用状态压缩,我们对于每一把钥匙 ...

  7. Android 获取手机的厂商、型号、Android系统版本号等工具类（转载）

    Android 获取手机的厂商.型号.Android系统版本号等工具类 1.获取手机制造厂商 2.获取手机型号 3.获取手机系统当前使用的语言 4.获取Android系统版本号 5.获取手机IMEI串 ...

  8. 求int型正整数在内存中存储时1的个数 && int型的数到底最大是多少？

    输入一个int型的正整数(十位数之内!嘞!),计算出该int型数据在内存中存储时1的个数. #include<bits/stdc++.h> using namespace std; int ...

  9. hadoop学习笔记（九）：mapReduce1.x和2.x

    一.MapReduce1.0的数据分割到数据计算的过程 MapReduce是我们再进行离线大数据处理的时候经常要使用的计算模型,MapReduce的计算过程被封装的很好,我们只用使用Map和Reduc ...

  10. TP5.1 分页(带参数传递)

    不带参数: $rs = Db::name('admin')->order(['id'=>'desc'])->paginate(1); 带参数传递: $rs=Db::name('adm ...