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的思考.
分享到：
相关推荐
本文将详细介绍JavaScript中一种常见的事件处理用法——onclick(this)。 首先，我们需要理解什么是onclick事件处理器。在HTML中，onclick是一个事件属性，用于指定当元素被点击时将调用的JavaScript代码。这个属性...
IE8中的JavaScript点击事件(onclick)不兼容问题，是指在旧版浏览器Internet Explorer 8中，使用JavaScript设置的点击事件处理程序无法正常工作的情况。这种情况在使用JavaScript生成的页面元素如分页按钮时尤为常见...
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head>...
JavaScript是目前广泛使用的一种网页脚本语言，它的核心能力之一就是操作用户的交互行为，如点击（click）、悬停（hover）等，而onclick事件是其中最基础且常用的一种。它允许我们定义当用户点击某个元素时所要执行...
JavaScript Option onclick 事件 IE 解决方案及兼容 IE 和 Firefox JavaScript 中的 Option onclick 事件是用户在Select 元素中选择一个选项时触发的事件，但是在 Internet Explorer（IE）浏览器中，该事件无法正确...
这种方式常见于`<a>`、`<input>`等标签中，通过事件属性如`onclick`、`onmousedown`等来触发JavaScript函数。 **示例1：** ```html <a href="javascript:document.write('Hello World!')">Click ``` - **解释：** ...
在 HTML 中调用 JavaScript 函数而不使用 onclick 是前端开发中的一种高级技巧，它可以提供更灵活的事件处理方式，使得代码更加整洁和易于维护。本文主要介绍了如何通过其他方法调用 JavaScript 函数，尤其是在不...
<a href="" onclick="javascript: return del();">删除 ``` 在实际开发中，有时候需要更灵活的处理。比如，当删除操作关联到某个链接或按钮时，我们可以直接在该元素的`onclick`事件处理器中调用`del()`函数，并...
打印预览" onclick="javascript:printpreview();"> 关闭" onclick="javascript:window.close();"> ``` 在上面的代码中，我们使用了 ExecWB() 函数来实现打印、打印预览和页面设置的功能。ExecWB() 函数可以执行多种...
本文将详细介绍JavaScript中的一些常见事件，包括onClick、onChange、onSelect、onFocus以及onLoad事件。 1. onClick事件 onClick事件是最常用的事件之一，它在用户点击元素（通常是按钮或链接）时触发。在HTML中，...
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
在网页开发中，JavaScript 是一种常用的脚本语言，用于实现页面的交互效果。"onclick" 事件是JavaScript中的一种事件处理函数，它会在用户点击一个元素时触发指定的代码。在这个场景中，我们讨论的是如何利用 ...
JavaScript是一种广泛应用于网络开发的轻量级编程语言，它基于ECMAScript标准，主要用于实现客户端的交互效果和动态网页内容。JavaScript的主要特点是解释性、基于对象和事件驱动，这意味着它无需预编译，可以直接在...
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
网页编程是构建动态交互式网站的关键技术之一，其中JavaScript扮演着至关重要的角色。在这个实例代码集合中，我们可以通过分析每个文件来深入理解JavaScript在网页开发中的应用，以及它与HTML的紧密协作。以下是对...
用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用JavaScript实现仿Windows关机效果
<button onclick="togglePlay()">播放/暂停 function togglePlay() { if (myVideo.paused) { myVideo.play(); } else { myVideo.pause(); } } ``` 在提供的"player"文件中，可能包含了实现以上功能的...
这两本书籍，"JavaScript从入门到精通(第2版)" 和 "高性能JavaScript"，分别涵盖了JavaScript的基础知识和优化技巧，对于想要深入理解并提升JavaScript技能的开发者来说是宝贵的学习资源。 "JavaScript从入门到精通...