由于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。