javascript里的onclick事件失败了! 怎么这么点小事也出错?? 我心里有些沮丧.
问题是这样的, 一个页面有两个button,这两个button分别触发去后台取数据的操作,也就是上下翻页.由于取数据的function是单独写好的, 仅仅以传参来区分是上页的数据还是下页的数据. 对这个取数据function的调用是通过给两个button注册onclick事件来触发的.模拟代码如下:
<script>
function getDataForPage(pageIndex,resultNumber){
//.........
}
function registClickEvent(){
var buttons = ducoment.getElementsByClassName("ajaxController");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = function(){
if(i == 0){// 如果是第一个button, 让它去取"上一页"的数据
getDataForPage(...,...);//
}else{// 第二个button, 取"下一页"数据.
getDataForPage(...,...);
}
}
}
}
</script>
<body>
<input type="button" class = "ajaxController" value="上一页"/>
<input type="button" class = "ajaxController" value="下一页"/>
</body>
<script>
registClickEvent();
</script>
为什么不在"上一页""下一页"两个button上直接通过onclick来注明而非要跑到后面再以script的方式来补注呢?
class为ajaxController的两个button是以javascript操作HTML里DOM的方式生成的,当然也可以在新建一个button时就给它注上onclick事件,原因是操作DOM的代码很长,若直接写onclick事件,对维护不利.于是写了一个集中的registClickEvent方法来注册了.
这是一个题外话, 回到正题上来.
实话说代码写成这样,现在看来有些"恐怖"! onclick事件里怎么能这样写呢?这是事后这样想, 不过当时也不知是活多还是别的什么原因,真真切切地这样写了.
为什么会这样呢? 现在把一些所得整理一下.
简单是说就是onclick事件的执行方法里不能引用外面的变量. 在模拟代码里,也就是说registClickEvent方法中的" if(i == 0) "是有问题的, 因为这个i是onclick执行方法外定义的.找到原因也就好改了.
举一反三下, 出问题不要紧,出问题能改,若能"杀一儆百"并发现新大陆就更难能可贵啦, 呵呵, 这样一想,还真感谢那些成语.
有了这个念头后, Java里内部匿名类传参用final的情景出现了. 当以内部匿名类的方式来"注册"一些"事件"时, 匿名内部类里方法要用外部类(准确来说是外部那个方法)的变量可以, 但那个变量一定是final的.当时第一次接触这个"规则"里觉得有些怪怪的.为什么呢? 内部类方法用就用吧,还要用一个final的变量条件还挺高!有
内部匿名类与final的问题,当时学时有了怀疑后,也查过很多资料, 不过也没一个很清晰的解答.后来工作后极少碰到这样的问题,再加上IDE的支持万一自己有些疏忽的话,它也有了提醒.这样一来也就没机会多想.现在再结合 JavaScript里的问题,有了一个正面的交锋, 虽说现在还没能从"细胞"层面上来理解,但还是一个很大的收获嘛: 方法调用栈,变量存储,一个类的生命周期... 这些概念一起碰撞有了突破.
这也是从JavaScript里的onclick事件引发的对Java final的思考.
3029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
