先看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. PHP multipart/form-data 远程DOS漏洞

    import sys import urllib,urllib2 import datetime from optparse import OptionParser def http_proxy(pr ...

  2. 前端必备 Nginx 配置

    Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用 代理服务器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写 ...

  3. 【牛客小白月赛21】NC201604 Audio

    [牛客小白月赛21]NC201604 Audio 题目链接 题目大意: 给出三点 ,求到三点距离相等的点 的坐标. 解析 考点:计算几何基础. 初中蒟蒻表示不会什么法向量.高斯消元..qwq 方法一: ...

  4. MongoDB - String转换为Int，并更新到数据库中

    方法1 使用$convert, MongoDB版本 >= 4,速度快. 使用pymongo示范,原生mongo语句并没有尝试. # 假设{'age': '47'}, 转换后为{'age': 47 ...

  5. [IOI2002] 任务安排

    题目链接 题意 一些不能改变顺序的任务被分成若干批,每批包含相邻的若干任务.第 $i$ 个任务单独完成所需的时间是 $T_i$.在每批任务开始前,机器需要启动时间 $S$,而完成这批任务所需的时间是各 ...

  6. 在Linux系统上安装Git

    Git是目前流行的非常好用的版本控制工具,这里介绍两种安装方式,1.yum安装,2.从github上下载最新的源码编译后安装 一.yum安装 1.在Linux上是有yum安装Git,非常简单,只需要一 ...

  7. 【音乐欣赏】《Abnormalize》 - 凛として時雨

    曲名:Abnormalize 作者:凛として時雨 [00:00.96]誰にも見せられないもの [00:06.44]頭の中溢れて [00:11.96]間違いさえも無い世界へ [00:17.16]迷い込ん ...

  8. Go_sql注入

    我们任何时候都不应该自己拼接SQL语句! sqlInjectDemo("xxx' or 1=1#") sqlInjectDemo("xxx' union select * ...

  9. Oracle 11G在用EXP 导入、导出时，若有空表对导入导出中遇到的问题的解决

    11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...

  10. js数组和对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...