JavaScript“onblur事件”调用函数失效 原因与解决方法

由于JavaScript事件有很多,例如:

  • 鼠标事件:onclick
  • 键盘事件:onkeydown、onkeypress
  • 表单事件:onblur、onchange
  • 窗口事件属性:onerror、onload

 

因此,如果你遇到其它的JavaScript事件调用函数失效,解决方法也同理。

 

以我这里为例子:

今天我在调试代码的时候,发现我的纯原生JavaScript代码中的onblur事件调用函数失效了,没有调用成功,调试得到的结果是:

undefined

undefined

 

原因:

首先,我的函数是已经存在的,如果函数不存在就会出现“ xxxx is not a function“这样的错误。

因此,最终原因是我自己代码错了,多增加了一个括号所引起的。

 

解决方法

 

我错误的代码如下:

document.getElementById('alias').onblur = AliasUnique();

 

正确代码如下:

  <script type="text/javascript">
  //console.log(document.getElementById('alias').onblur = AliasUnique);
  document.getElementById('alias').onblur = AliasUnique;
    function AliasUnique(){
        var alias = document.getElementById('alias').value;
        if(alias){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    console.log(xmlhttp.responseText);
                    document.getElementById('alias').value = xmlhttp.responseText;
                    document.getElementById('alias').setAttribute("readonly","readonly");
                    document.getElementById('alias').style.color="#d2d2d2";
                    document.getElementById('alias').onblur = '';
                }
            };
            var data = "alias="+document.getElementById('alias').value+"&mode=alias"+"&token=<?php echo $get_token; ?>";
            console.log(data);
            xmlhttp.open("POST","<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?type=article&action=ajax",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(data);
        }
    }
</script>

 

我现在再去调式,结果如下:

console.log

 

总结:

编程写代码的时候一定要学会调试,有时候就是细节的问题,一个小括号也能引出大BUG。

    A+
发布日期:2021年03月30日 16:48:26  所属分类:JavaScript
最后更新时间:2021-03-30 16:53:59
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
jQuery视频教程: 从零开始学合集
  • ¥ 39.0元
  • 市场价:39.0元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
Swoole从入门到精通(第一季)
  • ¥ 199.0元
  • 市场价:199.0元
SEO顾问 单站最低999元 整站全方位优化
SEO顾问 单站最低999元 整站全方位优化
  • ¥ 999元
  • 市场价:4999元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: