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文件

  • 相关阅读:
    NodeJS学习笔记之Connect中间件应用实例
    NodeJS学习笔记之Connect中间件模块(二)
    NodeJS学习笔记之Connect中间件模块(一)
    前端构建工具gulpjs的使用介绍及技巧
    稳定的算法用于对象排序
    aspectJ
    SpringBoot自定义嵌入式Servlet容器
    一个对任务分而治之的java类ForkJoin详解
    VC6.0软件安装教程
    经典算法_杨辉三角,集合法
  • 原文地址:https://www.cnblogs.com/xiaohaodeboke/p/11876846.html
Copyright © 2011-2022 走看看