html onblur 函数执行了2次,JavaScript“onblur事件”调用函数失效 原因与解决方法

由于JavaScript事件有很多，例如：

鼠标事件：onclick

键盘事件：onkeydown、onkeypress

表单事件：onblur、onchange

窗口事件属性：onerror、onload

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

以我这里为例子：

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

undefined

原因：

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

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

解决方法

我错误的代码如下：

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

正确代码如下：

//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);

}

}

我现在再去调式，结果如下：

总结：

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